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本 书 赞誉 


“就 如 CoffeeScript 本 刁 一 样 ，Trevor 单 刀 直 人， 为 你 指出 CoffeeScript 的 优点 ， 教 你 如 何 编写 
人 简洁 明了 的 CoffeeScript 代 人 码 。” 





Scott Leberknight，Near Infinity 公 司 首席 架构 师 








“尽管 CoffeeScript 还 是 一 门 新 培 言 ， 但 它 几 乎 无 处 不 在 。 这 本 书 将 为 你 展示 CoffeeScript 到 底 
有 和 多么 强大 和 有 趣 。” 





Stan Angeloff，PSP Web Technologies， 保加利亚 地 区 总 经 理 


“CoffeeScript 可 能 会 成 为 Web 程 序 开发 领域 最 伟大 的 车 新 之 一 。 目 从 我 第 一 次 发 现 它 就 青 没 
写 过 一 行 纯粹 的 J avaScript 代 人 码 。 和 硕 望 该 者 该 完 这 本 精彩 的 书后 也 能 有 相同 的 感悟 。 
Nic Williams 博 士 ，Mocra 公 司 CEO/ 创 始 人 

















“本 书 是 极 佳 的 CoffeeScript 入 门 指南 ， 它 出 目 CoffeeScript 计 区 最 有 威望 的 成 员 之 一 。 无 论 你 
是 前 端 工 程 师 还 是 后 端 开 发 人 员 , 本 书 都 将 助 你 在 短 时 间 内 见 悉 CoffeeScript。 本 书 实 为 CoffeeScript 
开发 者 必 备 !” 








Sam Stephenson，JavaScript 框 架 Prototype 创 始 人 








“Trevor 将 语言 概述 和 真实 例子 结合 得 非常 完美 ， 可 想 而 知 我 为 什么 会 把 CoffeeScript 当 成 
iOS、Android 和 WebOS 移 动 开 发 的 秘密 武 句 了 。 
一 一 Wynn Netherland，Changelog 共 同 创办 人 


“ 快 快 准备 好 , 跟着 Trevor Burnham 享 受 这 从 JavaScript 到 CoffeeScript 的 旅行 , 再 一 次 体会 Web 
开发 的 乐趣 吧 1” 








Javier Collado ，Canonical 有 限 责 任 公 司 自 动 化 测试 工程 师 
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CoffeeScript 金 科 玉 律 :“ 它 只 是 JavaScript!” 





coffeescript.org 





CoffeeScript 之 父 Jeremy Ashkenas 在 Twitter 上 有 个 很 好 笑 的 段子 。 

他 说 :“ 我 非常 想 知 道 在 GitHire 上 有 多 少 人 有 5$ 年 CoffeeScript 经 验 , 很 显然 我 有 很 多 地 方 需要 
向 他 们 请 教 。 

有 人 答 道 :“ 束 是， 这 些 人 大 概 是 在 一 边 者 咖啡， 一 边 写 脚本 。 

的 确 ， 与 Python 或 Ruby 相 比 ，CoffeeScript 非 党 年轻， 到 现在 才 两 年 出 头 的 时 间 。 

还 清楚 地 记得 , 我 是 在 了 解 Zombie.js 时 第 一 次 接触 到 CoffeeScript。 Zombie.js 是 一 个 用 于 客户 
端 JavaScript 测 试 的 轻型 框 染 ， 在 查看 Zombie.js 的 源码 时 ( http://zombie.labnotes.org/source/ )， 我 
就 被 CoffeeScript 的 优雅 和 对 应 的 床 亮 文档 所 吸引 了 。 

谁 说 使 用 CoffeeScript 不 是 如 边 者 咖啡 边 写 脚本 一 样 怡然 自得 呢 ? 真 的 ， 这 东西 很 酯 ! 

CoffeeScript 之 于 JavaScript， 就 如 Less 或 Sass 之 于 CSS。 它 吸收 了 JavaScript 语 言 的 精华 ,， 并且 
添加 了 很 多 现代 脚本 语言 (Python 和 Ruby 等 ) 所 具有 的 特性 ， 比 如 列表 解析 、 字 符 串 插值 、 参 数 
列 、 吸 收 操作 符 等 。 我 想 CoffeeScript 就 是 大 师 Douglas Crockford 所 想 要 的 那 种 JavaScript 子 集 ( 如 
他 在 《JavaScript 语 言 精粹 》 的 第 10 草 中 所 说 :“ 精 简 的 JavaScript 不 是 一 个 严格 的 子 集 ， 我 添加 了 
少许 特性 ……… ”), 它 能 够 减少 三 分 之 一 以 上 的 代码 量 , 但 由 它 得 到 的 JavaScript 代 码 去 除了 语言 怪 
辛 ， 能 够 兼容 所 有 3 引 | 苟 环境 |! CoffeeScript 编 译 生 成 的 JavaScript 代 人 码 可 读 性 很 强 ， 而 且 优 雅 程度 
不 亚 于 直接 写 出 的 JavaScript 代 码 ， 你 甚至 能 看 到 JavaScript 在 各 方面 的 最 佳 实践 。 

虽然 CoffeeScript 非 常年 轻 ， 但 因为 Rails 3.1 的 直接 集成 和 在 Node.js 开 发 方面 的 天 然 优 势 ， 
CoffeeScript 在 很 多 方面 都 有 了 应 用 , 比方 说 之 前 提 到 的 浏览 硕 模 拟 需 Zombie.js, 还 有 基于 Express 
的 高 级 Node.js 开 发 框架 Zappa, 甚至 使 用 CoffeeScript 写 成 的 PSD 文 件 解 析 吾 psd.js( http://meltingice. 
github.com/psd.js/ )。 

但 无 论 CoffeeScript 如 何 优秀 和 使 用 广泛 ， 总 之 要 记 住 它 的 金 科 玉 律 :“ 它 只 是 JavaScript!” 

这 人 句 话 是 本 书 的 精髓 。 作 者 Trevor Burnham 通 过 一 个 贯 罕 全 书 的 5 x 5 拼 字 游戏 , 从 基础 开始 ， 
将 CoffeeScript 各 方面 的 知识 讲解 得 通俗 易 懂 ， 如 何 与 jQuery 这 类 非常 流行 的 类 库 完美 集成 ， 如 何 
浒 不 有 余地 结合 Socket.IO 实 现 Node.js 双 通道 异步 通信 。JavaScript 能 做 的 事情 ，CoffeeScript 也 可 
以 ， 而 且 做 起 来 更 快 、 更 优雅 ! 





























VI 译 者 序 


想 要 站 在 JavaScript 开 发 和 Web 开 发 的 最 前 治 吗 ? 这 本 书 正 好 适合 你 ! 

感谢 图 灵 公 司 引 进 本 书 ， 并 给 了 我 翻译 的 机 会 。 感 谢 傅 志 红 老 师 、 李 松 峰 老师 和 李 佬 老师 ， 
在 翻译 过 程 中 给 予 我 诸多 帮助 和 或 励 。 感 谢 图 灵 社 区 的 朋友 , 他 们 在 阅读 样 草 之 后 给 了 我 很 多 反 
僻 。 感谢 大 众 点 评 网 尤其 是 前 问 团 队 在 翻译 过 程 中 对 我 的 理解 和 支持 。 感谢 Jeremy Ashkenas 设 计 
了 这 门 优雅 的 语言 ， 还 要 感谢 本 书 作 者 Trevor Burnham 耐 心 为 我 解答 原文 中 我 不 懂 的 地 方 。 

最 后 还 要 感谢 我 的 爸爸 、 妈 妈 和 女友 吴 竞 男 ,谢谢 你 们 的 文 持 和 理解 。 尤 其 是 小 吴 ， 算 是 我 
译 稿 的 第 一 个 谈 者 ， 谢 谢 你 的 诸多 批评 和 建议 。 
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JavaScript 生 而 目 由 ， 但 直到 现在 ， 它 依然 处 处 受到 制约 。 

它 从 来 都 不 是 一 门 好 用 的 编程 语言 :运行 速度 非常 慢 , 在 不 同 的 浏览 锅 中 有 不 同 的 怪异 实现 ， 
20 世 纪 90 年 代 后 期 它 就 牢 牢 定格 在 了 犹如 琥 班 般 的 时 间 标 本 里 。 也许 你 曾经 使 用 它 来 实现 过 下 拉 
订单 或 者 可 排序 列表 ， 但 是 你 可 能 并 不 享受 这 样 的 经 历 。 

我 们 是 笠 运 的 , 如 今 的 JavaScript 下 享受 肴 一 场 当 之 无 愧 的 复兴 。 由 于 各 浏览 带 厂 商 的 不 懈 努 
力 ， 目 前 它 已 成 为 速度 最 快 的 主流 动态 语言 。 从 服务 需 端 到 Photoshop ， 它 无 处 不 在 ， 并 且 它 是 
唯一 一 门 可 以 在 Web 各 个 层面 使 用 的 编程 语言 。 

CoffeeScript 韭 常 小 巧 ， 它 的 设计 初 囊 就 是 让 开发 者 更 方便 地 使 用 JavaScript 的 精华 部 分 : 第 
一 流 的 函数 、 类 哈 而 对象， 甚至 还 有 被 误解 顺 闪 的 原型 链 。 如 果 没 什么 问题 的 话 ， 你 最 多 只 需要 
写 三 分 之 二 的 代码 量 ， 就 能 生成 和 原来 一 样 多 的 JavaScript 代 人 码 。 

CoffeeScript 很 重视 代码 的 可 读 性 以 及 消除 语法 混乱 。 同 时 ，CoffeeScript 与 JavaScript 之 间 保 

寺 了 一 对 一 的 关系 ， 这 就 意味 者 应 该 不 存在 性 能 耗损 的 问题 。 事 实 上 ， 由 于 编译 带 的 一 些 优化 ， 
很 多 JavaScript 类 库 在 移植 到 CoffeeScript 之 后 反而 运行 得 更 快 了 。 

选中 本 书 是 你 的 村 运 。 目 从 项 目 早 期 以 来 ，Trevor 束 满腔 热情 地 为 CoffeeScript 作 出 贡献 ， 没 
有 人 能 比 他 更 了 解 这 门 语言 的 细 校 未 和 ， 以 及 这 门 语 言 的 特性 和 朴 漏 背后 的 和 争论 史 。 本 书 是 专家 
亲临 上 阵 的 CoffeeScript 人 人 门 指导 。 

我 到 肯定 ，CoffeeScript 肯 和 定 会 造就 儿 个 项 目 , 我 迫不及待 地 想 听 到 与 此 相关 的 令 人 振奋 的 消 
县 一 一 天 知道 呢 一 一 你 可 能 会 党 此 局 发 创造 出 一 个 属于 目 己 的 小 语言 。 
























































Jeremy Ashkenas，CoffeeScript 之 久 
2011 年 4 月 
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从 来 没有 人 认为 JavaScript 会 成 为 世界 上 最 重要 的 语言 。 它 从 Scheme 和 Self 那 里 借鉴 设计 思 
想 ， 揉 合 了 C 语 言 的 代码 风格 ， 在 十 天 之 内 就 被 临时 拼凑 了 出 来 。 以 至 于 它 的 名 字 也 是 一 个 令 人 
滥 粹 的 组 合 一 一 它 和 男 一 个 几乎 没有 任何 共同 之 处 的 语言 ( 除 少 数 几 个 关键 字 之 外 ) 联系 到 了 
一 起 2?。 但 JavaScript 一 经 推出 就 势不可挡 。 它 作为 唯一 所 有 主流 浏览 器 都 支持 的 脚本 语言 ， 很 快 
便 成 为 了 Web 开 发 领域 的 “世界 语 ”。 而 在 21 世 纪 初 期 ， 随 着 Ajax 技术 的 风靡 ， 起 初 仅 为 网 页 做 
些小 点 缀 、 微 不 足 道 的 JavaScript， 瞬 间作 为 富 应 用 程序 开发 语言 而 羽 人 丰满 起 来 。 

随 着 JavaScript 的 走红 ， 不 满 之 声 也 从 四 面 八方 涌 来 。 有 人 指责 它 有 大 量 的 语言 “ 怪 装 ”及 
各 种 浏览 硕 间 实现 不 一 致 的 问题 。 其 他 人 则 抱怨 它 缺 乏 类 和 继承 的 特性 。 而 那些 刚刚 从 Ruby 或 
Python 入 门 编程 的 新 人 也 不 太 喜 欢 JavaScript， 觉 得 使 用 它 纷 杂 的 大 括号 、 圆 括号 以 及 分 扎 阻 得 了 
他 们 施展 拳脚 。 

有 几 个 敢于 冒险 的 家 伙 做 了 一 些 Web 应 用 开发 框架 , 使 用 这 些 框架 可 以 把 其 他 语言 写 的 代码 
编译 为 JavaScript。 比 较 闭 名 的 有 Google 的 GWT 和 280 North 公 司 的 Objective-J。 但 是 , 没有 几 个 程 
序 员 愿 音 在 浏览 带 和 他 们 之 间 染 上 一 个 厚重 的 抽象 层 , 他 们 情 处 继续 小 心 站 思 地 处 理 着 JavaScript 
的 各 种 缺陷 , 委 届 求全 于 它 的 “精华 部 分 ”( 也 就 是 Douglas Crockford 在 2008 年 出 版 的 《 JavaScript 
语言 精粹 》 中 摘 述 的 那些 特性 )。 

直到 现在 依然 如 此 。 


镇 上 来 的 新 小 伙 


2009 年 圣诞 节 ，jJeremy Ashkenas 首 次 发 布 了 CoffeeScript 语 言 ， 他 称 之 为 “JavaScript 那 不 怎 









































GD 这 里 指 的 是 Java。jJavaScript 原 名 叫 LiveScript， 当 时 Java 比 较 时 又 ， 且 网 景 公 司 正 和 Sun 公 司 ( Java 拥有 者 ) 宣布 合 
作 ， 为 搭 上 顺风 车 ， 故 将 LiveScript 更 名 为 JavaScript。 但 事实 上 Java 与 JavaScript 是 两 个 差别 很 大 的 编程 语言 。 
译 者 注 








@) 参阅 《编程 人 生 》( Coders 4t Work ) 中 Peter Seibel 对 JavaScript 之 父 Brendan Eich 的 采访 。 

@) 参阅 http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications ， 这 篇 文章 首次 使 用 词语 Ajax 介绍 该 技 
术 。 一 一 详 者 注 

http:/wtts.com/， 一 个 专门 收集 JavaScript“ 怪 癖 ” 的 网 站 。 

(5) Douglas Crockford，JavaScript 开 发 社区 教父 ， 畅 销 书 《JavaScript 语 言 精粹 》( JavaScript: The Good Parts ) 的 作者 。 
JavaScript 程 序 员 把 该 书 奉 为 圣经 ， 遵 循 上 面 的 原则 来 开发 JavaScript 程 序 。 译 者 注 

















前 言 IX 


么 疙 人 注目 的 小 兄弟 ”。 每 个 月 ，Ashkenas 和 其 他 人 都 会 给 CoffeeScript 少 加 大 量 的 新 特性 ， 很 快 ， 
该 项 目 便 在 GitHub "上 吸引 了 成 百 上 千 的 关注 者 。2010 年 3 月 ， 原 本 使 用 Ruby 编 写 的 CoffeeScript 
编译 项 ， 也 由 CoffeeScript 重 写 的 版 本 蔡 代 了 。 

2010 年 圣诞 人 CoffeeScript 发 布 1.0 版 ， 成 为 GitHub 上 最 受 关 注 的 项 目 之 一 。 

2011 年 4 月 ， 当 David Heinemeier Hansson 证 实 了 有 关于 在 Ruby on Rails 3.1 中 将 支持 
CoffeeScript 的 传言 时 ，CoffeeScript 又 受到 了 一 波 关注 。 

为 何 CoffeeScript 流 行 得 如 此 之 快 ? 我 想 有 3 个 原因 一 一 它 的 熟悉 度 、 安 全 性 和 可 读 性 。 


取 其 精华 


JavaScript 庞 杂 而 无 所 不 包 。。 在 提供 众多 优秀 的 函数 式 语言 特性 的 同时 , 它 还 保留 了 命令 式 语 
言 的 风格 。JavaScript 这 种 微妙 而 强大 的 功能 恰恰 会 让 初学 者 倍 感 挫折 :函数 可 以 作为 传递 的 参数 ， 
也 可 以 作为 函数 的 返回 住 ， 任 何 时候 都 可 以 给 对 和 象 添 加 新 的 方法 一 一 一 言 以 涪 之 ， 在 JavaScript 
中 ， 函 数 是 第 一 级 对 象 。 

CoffeeScript 中 保留 了 这 些 优良 的 特性 ,此 外 ,， 它 还 提供 了 一 套 语法 糖 ， 以 便 开发 者 更 好 地 使 
用 它们 。 


编译 优化 


想象 一 下 ， 如 果 有 这 么 一 门 编程 语言 ， 它 没有 语法 错误 ， 且 能 让 计算 机 忽略 拼写 错误 的 同时 
还 竭力 理解 你 的 代码 , 那 这 世界 该 多 美好 啊 ! 当然 了 , 程序 并 不 会 总 像 开 发 者 所 期 望 的 那样 运行 ， 
但 这 也 正 是 测试 工作 的 意义 所 在 。 

现在 再 想象 一 下 ， 你 草草 地 把 一 次 性 写 好 的 代码 发 布 出 来 (其 中 包含 拼写 错误 )， 全 世界 数 
不 清 的 机 妖 以 它们 上 略 有 不 同 的 方式 处 理 着 你 的 小 错误 。 突然 之 间 , 电脑 忽略 的 那些 语句 下 接 宕 挥 
了 成 千 上 万 人 使 用 的 应 用 程序 。 

令 人 个 恼 的 是 , 现实 世界 就 是 这 样 。JavaScript 设 有 标准 的 解释 需 ,， 而 数 以 百 计 的 浏览 希 和 服 
务 硕 疹 框 架 都 以 各 目的 标准 运行 JavaScript。 路 平台 的 不 兼容 问题 让 程序 员 们 头痛 不 已 。 

当然 ，CoffeeScript 并 不 能 解决 所 有 问题 ， 但 是 其 编译 名 尽力 确保 输出 的 JavaScript 代 码 符合 
Lin 刀 标准 ， 该 标准 可 以 过 滤 掉 常见 的 人 为 错误 和 不 规范 的 惯用 句法 。 当 你 输入 2=3 或 者 类 似 的 训 
无 意义 的 代码 时 ，CoffeeScript 编 译 帮 就 会 主动 提醒 你 一 一 错误 越 早 发 现 越 好 。 


代码 精简 


号 CoffeeScript 很 容易 上 疗 ， 为 什么 ?请 看 下 面 这 上 段 JavaScript 代 码 : 























J 是 一 个 基于 互联 网 的 存 取 服 务 , 用 于 使 用 Git 版 本 控制 系统 的 软件 开发 项 目 。GitHub 是 当今 最 流行 的 Git 存 取 站 点 。 
译 者 注 





@) 37signals 公 司 合伙 人 ，Ruby on Rails 之 父 。 一 一 译 者 注 
(3) http://www.javascriptlint.com/: JavaScript 验 证 需 。 


”~ 
续 
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function cube(num) { 
return Math.pow(num, 3); 


} 

var list = [1, 2, 3, 4, 5]; 

var cubedList = []; 

for (var i = 0; i < List.Length; i++) { 
cubedList.push(cube(list[1i])); 

} 

再 看 下 面 这 段 实 现 同样 功能 的 CoffeeScript: 

cube = (num) -> Math .pow num, 3 


st L203 4 S| 
cubedList = (cube num for num in list) 


仔细 观察 就 会 发 现 ,这 段 代码 的 字符 数 缩减 了 一 半 ， 代 码 行 数 减 少 了 一 半 还 多 ! 类 似 这 样 的 
好 处 在 CoffeeScript 中 随处 可 见 。 正 如 Paul Graham "所 说 :“ 人 简洁 就 是 力量 !”?” 

简短 的 代码 易于 编写 和 了 阅 谈 ， 更 关键 的 是 易于 修改 。 代 人 码 越 长 就 越 麻烦 ， 因 为 任何 显著 的 改 
动 都 需要 兹 费 大 力气 。 而 短小精悍 的 代码 块 只 需要 敲 两 下 键盘 就 能 改 好 ,并 有 晶 还 能 促成 一 种 更 加 
敏捷 、 快 速 迭代 的 开发 风格 。 

值得 一 提 的 是 , 切换 到 CoffeeScript 并 不 是 一 个 “ 非 此 即 彼 ” 的 命题 一 一 JavaScript 和 CoffeeScript 
的 代码 还 是 可 以 自由 地 互相 融合 。CoffeeScript 中 的 字符 串 和 数字 与 JavaScript 中 的 没什么 不 同 ; 
甚至 于 像 Backbone.js 这 样 的 JavaScript 框 架 中 的 自 定 义 类 也 能 在 CoffeeScript 中 运行 。 所 以 不 必 担 
心 在 CoffeeScript 中 调用 JavaScript 代 码 会 出 现 什么 问题 ， 反 之 亦 人 然 。 我 们 将 在 第 5 草 讨 论 如 何 将 
CoffeeScript 与 JavaScript 最 流行 的 框架 jQuery 一 起 使 用 。 



































在 CoffeeScript 中 区 入 JavaScript 代 码 

还 应 该 在 这 里 提 一 下 如 何 将 JavaScript 代 码 能 入 到 CoffeeScript 代 码 中 。 如 下 所 示 ， 使 用 反 
引号 和” 包 右 要 误 入 的 JavaScript 代 码 即 可 : 

console.log Impatient ? vseBackticks() :learnCoffeeScript() 

CoffeeScript 编 译 器 会 直接 忽略 掉 反 引号 里 的 内 容 ， 这 也 就 是 说 ， 比 如 你 在 反 引 号 内 声明 
一 个 变量 ， 该 变量 并 不 受 CoffeeScript 作 用 域 规则 的 约束 。 

在 写 CoffeeScript 的 时 候 ， 我 没有 一 次 需要 使 用 反 引 号 。 毕 竟 ， 这 种 方式 看 不 顺眼 还 好 ， 怕 
的 是 搞 不 好 就 会 出 错 。 借 用 Troy McClure 的 金玉 良言 :“ 知 道 它 怎么 回 事 了 吧 最 好 别 用 。 ” 














故事 束 讲 到 这 里 ,动手 编 代 人 码 才 是 真 功夫 ,其 他 的 只 是 等 同 于 meta ( 即 谈论 代码 编写 )，Je 企 





(美国 著名 程序 员 、 风 险 投资 家 、 博 客 和 技术 人 作家， 著名 创业 投资 公司 YCombinator 创 始 人 之 一 ,《 黑 客 与 画家 》 作 
者 。 一 一 译 者 注 

@) http://www.pauleraham.com/power.html: 简洁 就 是 力量 。 

(3) http://documentcloud.github.com/backbone/: 一 个 非常 流行 的 用 来 开发 Web 应 用 的 JavaScript MVC 框 架 。 

(9 出 自 美国 著名 动画 情景 喜剧 《辛普森 一 家 》，Troy McClure 是 该 剧 中 的 一 个 虚构 人 物 。 一 一 译 者 注 











前 言 XI 


Atwood 曾 说 过 :“ 过 多 的 meta 就 是 谋杀 。 “所 以 让 我 们 再 花 那 么 一 点 点 的 篇 幅 来 介绍 下 你 手 上 这 
本 书 〈 我 你 证 就 只 有 几 页 了 )， 然 后 我 们 就 要 开始 唑 唑 嘲 嘲 地 向 出 些 “ 热 乎 乎 ”的 代码 了 了。 


目标 读者 


如 采 你 对 学 习 CoffeeScript 感 兴趣 ， 那 本 书 正 好 适合 你 ! 然而 ， 由 于 CoffeeScript 和 JavaScript 
有 关 千 丝 万 缕 的 联系 , 所 以 实际 上 本 书 贯 穿 了 两 种 语言 一 一 但 没有 足够 的 篇 幅 把 这 两 种 语言 都 教 
给 你 。 因 此 ， 笔 者 假定 你 在 阅读 本 书 之 前 已 经 对 JavaScript 有 所 了 解 了 。 

当然 你 不 必 是 John Resig 一 样 的 “JavaScript Ninia”( JavaScript 妨 者 ) 2。 事实 上 ， 如 果 你 只 
是 个 JavaScript 业 余 爱 好 者 那 就 太 好 了 ! 通读 本 书 会 让 你 学 到 很 多 JavaScript 知 识 。 查 看 脚注 给 出 
的 链接 ， 就 能 找到 我 推荐 的 其 他 资源 。 如 果 你 是 编程 新 手 , 绝对 应 该 先 看 看 Eloqguent JavaScript， 
网 上 也 有 一 个 可 以 互动 的 版 本 。 如 果 你 已 经 有 所 涉 狂 ， 但 想 更 专业 点 儿 ， 那 就 读 读 JavaScript 
Garden“”。 如 果 你 想 要 一 个 全 面 的 参考 ， 那 没有 比 Mozilla Developer Network”( Mozilla 开 发 者 社 
区 ) 更 适合 你 的 了 。 

本 书 会 提 到 很 多 Ruby 的 知识 。CoffeeScript 中 请 多 优秀 的 特性 都 是 从 Ruby 那 里 来 的 ， 比 如 说 
隐 式 返回 值 、 参 数列 以 及 if/unLess 修 饰 符 等 。 同 时 也 多 亏 了 Rails 3.1，CoffeeScript 在 Ruby 使 用 
者 中 也 有 了 大 量 的 粉丝 。 所 以 ， 如 果 你 是 个 Ruby 爱 好 者 , 那 非常 棒 ， 你 已 经 先 人 一 步 了 。 如 果 不 
是 ， 也 别 担心 ， 看 过 一 些 例子 ， 你 就 能 轻松 上 手 。 

如 果 对 本 书 有 任何 不 清楚 的 地 方 ， 笔 者 建议 你 到 本 书 的 论坛 ”上 去 提问 。 尽 管 笔者 尽力 做 到 
意思 清晰 ， 但 计算 机 才 是 唯一 能 完全 、 下 接地 理解 编程 语言 的 东西 一 一 但 它们 不 需要 买 什 么 书 。 


本 书 结构 


我 们 将 从 挖掘 编译 和 运行 CoffeeScript 代 码 的 多 种 方式 开始 我 们 的 CoffeeScript 之 旅 。 接 下 来 
我 们 会 深入 了 解 CoffeeScript 的 语言 细 广 。 每 革 都 会 介绍 一 些 概念 和 规则 , 把 它们 结合 到 贯穿 本 书 
的 示例 项 目 中 去 〈 下 一 节 将 做 详细 介绍 )。 

要 想 掌 握 CoffeeScript， 必 须 了 解 它 与 JavaScript 领 域 的 其 他 技术 结合 在 一 起 如 何 运 行 。 因 此 
在 介绍 完 语 言 的 基础 知识 之 后 , 我 们 将 简单 地 了 解 下 jQuery 和 Node.js。 前 者 是 最 流行 的 JavaScript 
框架 , 后 者 则 是 一 个 令 人 兴奋 的 新 项 目 能 够 让 JavaScript 在 浏览 硕 之 外 运行 ! 我 们 不 会 深入 介 
绍 这 两 个 工具 ,主要 看 一 下 它们 与 CoffeeScript 结 合 使 用 时 的 绝 佳 搭配 ,将 它们 的 力量 结合 在 一 起 ， 















































GD http://www.codinghorror.com/blog/2009/07/meta-is-murder.html:《 就 事 论 事 就 是 谋杀 》, 
@) John Resig，jQuery 之 父 ,“JavaScript Ninja” 引 自 他 即将 出 版 的 书 Secrek of the JavaScript Ninia， 该 书 深 刻 探讨 了 
JavaScript 不 为 人 知 的 一 面 ， 是 大 牛 John Resig 的 又 一 力作 。 一 一 译 者 注 


(3) http://eloquentjavascript.net/ 





(4) http://javascriptgarden.info/ 
(5) https://developer.mozilla.org/en/JavaScript/Guide 
(©) http://forums.pragprog.com/forums/169 


XII 前 言 


短 短 几 个 小 时 内 就 能 写 出 一 个 完整 的 多 人 游戏 来 。 

另外 , 不 管 处 于 什么 水 平 ， 你 都 需要 确保 目 己 完成 每 草 后 面 的 习题 。 它 们 虽然 容 单 但 也 有 一 
定 的 挑战 性 ， 旨 在 帮助 你 了 解 一 些 令 CoffeeScript 程 序 员 防不胜防 的 陷阱 。 试 着 自己 把 它们 做 完 ， 
之 后 可 参阅 附录 A 中 的 习题 答案 。 

本 书 的 示例 代码 、 勤 误 表 和 讨论 区 都 可 以 在 PragProg 相 关 页 面 找到 : http://pragprog.com/titles/ 
tbcoffee/cofteescrlpt。 


天 于 江 例 游戏 : 5X5 


每 草 的 最 后 部 分 ,我们 会 把 新 的 概念 应 用 于 一 个 目 创 的 名 为 S x 5 的 拼 字 游戏 之 中 ,顾名思义 ， 
5 x 5 游戏 在 一 个 5 x 5 的 网 格 上 进行 。 游 戏 开 始 时 每 个 小 格子 里 会 有 一 个 随机 的 字母 ， 然 后 玩家 轮 
流 交换 方 格 中 的 字母 ， 每 一 次 交换 之 后 为 所 有 形成 的 单词 打分 (通常, 每 个 移动 的 小 格子 可 与 周 
围 的 格子 形成 4 个 新 的 单词 : 横 排 一 个 、 坚 排 一 个 以 及 两 条 对 角 线 上 的 两 个 一 一 只 把 从 左 到 右 方 
向 上 的 单词 算 在 内 ) "， 如 图 1 所 示 。 

















[oO A 9 Terminal — env — 80x24 Player 1, please select your first tile, 
WW 图 | - 

Please enter coordinates for the first tile. F D T 

i enter coordinates for the second tile. 

| 


: 

Swapping (4, 1) with (5, 1)... 
You formed the following word(s): 
OR, RAI, RAIA, OAK 


DI 

H D 0 

I LL 区 

Vor sonranE D Bp 
EOIAIN R E |T 











Please enter coordinates for the first tile. v Player 1 Player 2 
| 7 5 


图 1 命令 行 版 和 Web 版 3 x 5 游戏 ， 它 们 共用 一 份 逻 辑 层 处 理 代码 


记分 规则 是 以 组 成 单词 的 那些 字母 在 Scrabble 游戏 中 的 点 值 琶 加 为 基础 , 再 乘 以 形成 的 不 相 
同 的 单词 的 个 数 。 因 此 ， 拿 最 好 的 情况 来 说 ， 一 次 交换 形成 8 个 不 同 的 单词 ， 则 每 个 单词 的 分 数 
怠 都 乘 以 8。 已 经 在 之 前 洲 戏 中 使 用 过 的 单词 则 不 计算 在 内 。 

















OD 依据 本 书 中 5 x 5 游戏 的 有 效 单 词 判断 规则 来 看 ， 每 个 方向 至 多 不 止 形 成 一 个 单词 ， 因 此 这 里 的 表述 有 误 ， 包 括 后 
面 的 “ 拿 最 好 的 情况 来 说 ， 一 次 交换 形成 8 个 不 同 的 单词 ……” 也 有 误 ， 最 好 情况 也 不 止 8 个 单词 。 
一 译 者 注 
@ Scrabble 是 西方 流行 的 英语 文字 图 版 游戏 ， 该 游戏 不 同 字母 有 不 同 分 数 ， 是 根据 在 标准 书写 英语 中 出 现 频率 计算 
的 ， 本 书 范例 游戏 5 x 5 也 采用 这 种 计 分 规则 。 一 一 译 者 注 
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前 言 XIII 








我 们 将 在 第 2 ~ 4 章 中 创建 该 游戏 的 命令 行 版 本 ， 然 后 在 第 5$ 章 将 其 移植 到 浏览 需 端 ; 最 后 在 
第 6 草 最 终 实现 多 人 游戏 的 功能 。 你 会 发 现 从 命令 行 移 植 到 浏览 需 再 到 服务 右上 是 如 此 容易 一 一 
因为 它们 用 的 是 同一 种 语言 CoffeeScript。 








CoffeeScript 社区 


- 门 伟大 的 语言 少不了 强大 社区 的 文 持 。 如 果 你 过 到 了 问题 ， 该 到 哪里 求助 呢 ? 

到 StackOverflow ”上 提问 是 个 很 好 的 办 法 ( 记得 给 你 的 问题 打上 coffeescript 标 签 )， 附 上 
扰 你 的 代码 将 会 更 加 有 效 。 如 果 想 更 快 得 到 答案 , 通常 可 以 到 Freenode IRC ”的 #coffeescript 
频道 找 些 友善 的 家 伙 问 问 。 要 是 想 讨 论 关 于 CoffeeScript 林 七 杂 八 的 事情 , 试 试 谷歌 小 组 。 对 于 更 
为 严肃 的 问题 ， 比 如 说 可 能 存在 的 bug,， 可 以 把 它 提交 到 GitHub 上 ”。 你 也 可 以 在 那儿 对 新 的 语言 
特性 提出 要 求 。CoffeeScript 还 在 不 断 的 完善 之 中 ， 开 发 团队 欢迎 任何 形式 的 反馈 。 

说 到 文档 ， 你 或 许 已 经 在 http:/coffeescriptorg 上 看 到 过 漂亮 的 官方 文档 了 。 还 有 一 份 官方 的 
wiki， 网 址 为 http://github.com/jashkenas/coffee-script/wiki。 当 然 现 在 也 包括 你 手 上 这 本 书 。 

如 何 联 系 我 ? 我 在 Twitter 上 有 GQ@CoffeeScript 账 号 ， 大 家 可 以 @ 我 ; 也 可 以 通过 一 种 比较 怀旧 
的 方式 一 一 给 我 发 邮件 ， 我 的 邮箱 : trevorburnham@gmail.com。 

激动 人 心 的 Web 开 发 之 旅 就 要 开始 了 ， 欢 迎 加 入 1 






































GD http:/stackoverflow.com， 一 个 非常 流行 的 程序 员 问 答 社 区 ， 由 被 奉 为 “程序 员 部 落 商 长 ”的 Joel Spolsky(《 软件 
随想 录 》 作 者 ) 创建 。 

@ Freenode IRC 是 专 为 开源 和 自由 软件 社区 开设 的 传统 聊天 室 ， 大 家 遇 到 问题 时 ， 可 以 到 这 里 请 教 高 手 ， 问 题 将 即 
时 得 到 解答 。 一 一 译 者 注 

3) http://github.com/jashkenas/coffee-script/issues 
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入 门 指南 





如 果 你 读 过 前 言 ,那么 现在 应 该 已 经 了 解 了 CoffeeScript 是 什么 , 它 从 何 而 来 ,以 及 它 为 什么 
是 继 Herman Miller 牌 办 公 椅 之 后 , 对 程序 员 来 说 最 棱 的 东西 了 ,但 是 实际 上 你 还 没 写 过 一 行 代码 ， 
等 不 及 了 是 吧 ? 

好 , 深呼吸 下 ， 时 候 到 了 。 在 本 章 中 ,我 们 将 在 你 的 操作 系统 中 安 猴 CoffeeScript， 配 置 好 编 
辑 天 ， 最 后 再 运行 一 些 代 人 码 ! 











1.1 ” 安 六 CoffeeScript 





CoffeeScript 编 详 需 是 用 CoffeeScript 写 成 的 ， 这 就 产生 了 一 个 先 有 鸡 还 是 先 有 有 重 的 问题 : 我 
们 是 如 何在 一 个 还 没 装 CoffeeScript 编 译 磊 的 系统 上 运行 编译 此 的 呢 ” 如 果 能 找到 某 种 方法 ,在 机 
器 上 浏览 器 之 外 运行 JavaScript 代 码 ， 且 允许 这 些 代码 访问 本 地 文件 系统 就 好 了 …… 

对 ， 其 实 我 们 有 Node.js! 大 家 把 Node 当 成 一 个 JavaScript 的 Web 服 务 右 ( 详 见 6.1 市 )， 但 是 
它 可 不 止 这 个 功能 。 从 根本 上 讲 ， 它 是 JavaScript 代 码 和 操作 系统 之 间 的 一 个 桥梁 。Node 也 有 
一 个 名 为 npm 的 很 棒 的 工具 ， 即 Node 包 管理 器 ( Node Package Manager ) "。 如 果 你 是 Ruby 程 序 
员 , 可 以 将 其 想象 为 Node 版 的 RubyGems”。npm 已 经 成 为 安装 管理 Node 程 序 和 类 库 约 定 俗 成 的 标 
准 了 。 

本 节 的 剩余 内 容 讲 述 Node 和 npm 的 安装 ,有 了 它们 ,我 们 就 能 够 使 用 CoffeeScript 标 准 的 coffee 
编译 器 了 (我 们 在 第 6 章 同 样 需 要 使 用 Node 和 npm )。 如 果 你 迫不及待 地 想 要 实践 一 下 的 话 ， 可 以 
访问 http://coffeescript.ore/， 点 击 “Try CoffeeScript” 按 钮 ， 然 后 直接 跳 到 下 一 章 去 ( 要 在 浏览 媳 
中 显示 console 输 出 ， 需 要 某 些 工 具 ， 比 如 说 Fire Lite” )。 


准备 好 了 ? 那 我 们 就 开始 吧 。 





GD http://npmijs.org/ 
(2 RubyGems 是 Ruby 标 准 的 第 三 方 类 库 进行 发 布 管理 的 软件 。 一 一 译 者 注 
(3) http://getfirebug.com/firebuglite 





使 用 Node.js 和 npm 安装 CoffeeScript 


尽管 有 很 多 不 借助 Node 来 运行 CoffeeScript 代 人 码 的 方法 ( 附录 2 会 谈 到 其 中 几 种 )， 然 而 我 还 
是 假定 你 在 全 书 中 用 的 是 标准 的 coffee 命 令 , 专门 运行 在 Node 上 的 。 但 是 只 有 在 第 6 章 才 会 明确 
需要 使 用 Node 和 npm。 

请 注意 ， 使 用 Windows 系 统 的 用 户 ， 在 继续 之 前 你 需要 先 安装 Cygwin"。Cygwin 基 本 上 相当 
于 一 个 Linux 模 拟 各 。 虽 然 Node.js 在 0.6 版 本 的 蓝图 中 计划 直接 文 持 Windows， 但 是 在 写作 本 书 之 
时 ,使 用 Cygwin 是 现 有 的 最 可 徘 的 方法 。 

Mac 用 户 需 要 安装 Xcode”, 重点 并 不 在 于 这 个 程序 ， 而 在 于 那些 随 它 一 起 安装 的 命令 行 开发 
工具 。 沦 试 运行 命令 gcc (GNU 编 译 需 集合 ) 来 检测 系统 中 是 否 已 经 安装 了 这 些 工 具 : 


$ gcc 
i686-apple-darwinl0-gcc-4.2.1: no input files 


如 果 输 出 如 上 所 示 , 那 束 说 明 准 备 就 绪 了 。 如 果 没 有 的 话 , 那么 就 请 安装 Xcode ( Mac 用 户 )， 
或 者 直接 安装 标准 创建 工具 ( Linux 或 者 Cygwin 环 境 下 )。 


无 论 是 什么 系统 ( Linux/Unix/Mac )， 现 在 都 配置 好 标准 创建 工具 了 吧 ? 太 棒 了 ! 现在 去 访 
问 http://gist.github.conV579814， 此 处 列 出 的 安装 方法 之 多 会 让 你 眼花 综 乱 ， 它 们 都 出 目 npm 的 创 
建 者 Isaac Schlueter。 对 于 所 有 Mac 用 户 ， 我 推荐 使 用 Homebrew 方法 ( 先 安装 Homebrew )。 对 于 
其 他 系统 的 用 户 ， 列 表 中 的 第 一 个 选择 则 最 为 下 接 ， 也 是 最 好 的 方式 。Node 是 个 很 大 的 程序 包 ， 

安 妆 好 Node 之 后 ， 运 行 最 新 的 npm 远 程 安 痛 脚 本 : 

$ curl http://npmjs.org/install.sh | sh 

如 果 你 碰 到 权限 错误 ， 可 以 使 用 chown 改变 Node 安 装 目录 的 属 权 ( 该 方法 可 以 减少 很 多 麻 
烦 )， 也 可 用 sudo shs 和 替换 普通 sh。 


无 论 选 择 哪 种 方法 ， 都 要 测试 一 下 node 和 npm 是 和 否 已 经 存在 于 系统 的 环境 变量 PATH 中 了 : 
$ node -V 

VO.4.8 

$ npm -Vv 

1.0.13 


( 何 单 的 提 一 下 瑟 版 本 相关 的 事情 : Node 的 版 本 号 为 偶数 时 API 保 持 稳 定 。 因 此 ， 本 书 的 例 
子 在 最 新 的 0.4.x 版 本 下 应 该 运行 正常 。 但 是 Node 0.5.x 版 则 会 以 API 的 变化 为 重点 ,而 这 些 变 化 将 

































































中 安装 Cygwin 可 参考 http://www.cygwin.com/，Node.js 最 新 的 主页 上 提供 了 一 个 Node.js installer ( V0.6.14 )， 无 须 安 
装 Cygwin 即 可 在 Windows 安 装 原生 的 Node.js 和 npm， 安 装 好 后 ， 添 加 到 PATH 即 可 。 详 者 注 

@) http://developer.apple.com/xcode/ 

@) http://github.com/mxcl/homebrew 

(4) chown， 在 Unix 或 Linux 系 统 中 修改 文件 属 权 的 命令 。 一 一 译 者 注 

G@) 在 这 里 指 有 root 权 限 的 shell ( 终端 )。 一 一 译 者 注 





1.1 安装 CoffeeScript 3 


会 包含 到 0.6.x 稳 定 版 中 。 说 到 npm, 本 书 中 假定 你 使 用 的 是 npm 1.x。 因此 ,如果 你 还 在 使 用 npm 0.x， 
征 时 候 升级 了 。 ) 


现在 抓 取 最 新 发 布 的 CoffeeScript: 


$ npm install -g coffee-script 
/usr/local/bin/cake -> /usr/tlocal/lib/node modules/coffee-script/bin/cake 
/usr/tlocal/bin/coffee -> /usr/local/lib/node modules/coffee-script/bin/coffee 


参数 -g 是 - -global 的 缩写 ， 它 使 已 安装 好 的 库 在 全 局 系统 中 都 可 用 ( 默认 情况 下 ，npm 
install [package] 把 指定 的 程序 包 安 猴 到 当前 的 子 目 录 node module 中 , 这样 便于 安装 只 适用 
于 特定 项 目的 类 库 )。 只 要 是 安装 那些 包含 二 进 制 可 执行 程序 的 程序 包 ， 我 都 推荐 使 用 - g 参 数 。 

npm install 命 令 的 输出 结果 告诉 我 们 ， 作 为 安装 包 的 一 部 分 ， 两 个 二 进 制 可 执行 程序 cake 
和 coffee 已 安装 好 了 。 让 我 们 测试 下 coffee 是 否 已 经 在 系统 的 PATH 中 了 : 


$ coffee -v 
CoffeeScript version 1.1.1 


如 果 这 样 不 行 , 那 就 看 一 下 npm instal1l 输 出 结果 中 -> 符号 之 前 的 路 径 ( 例如 /usr/local/bin )， 
然后 把 它 添加 到 系统 的 PATH 中 去 。 如 采 使 用 的 是 Mac 默 认 bash 终 并 的 话 ， 在 你 的 ~/.profile 文 件 中 
添加 下 面 这 行 代码 即 可 : 

export PATH=/usr/local/bin:$PATH 

注意 不 要 遗漏 :$PATH 这 部 分 ， 和 否则 /usrlocalbin 会 直接 替换 掉 系 统 的 PATH 变量 ， 而 不 是 将 自 
己 添 加 到 里 面 ! 要 让 这 行 代 码 生 效 ， 需要 保存 好 文件 并 且 开 启 一 个 新 的 会 话 终 端 ( 比方 说 ,把 老 
的 终 闪 天 掉 打开 一 个 新 的 ) 


如 有 条 使 用 的 是 其 他 系统 或 终 关 ， 步 又 可 能 会 略 有 不 同 ， 可 以 输入 echo $5SHELL 搞 清楚 你 使 用 
的 是 哪个 终端 。 不 要 起 了 在 修改 完 文 件 之 后 重新 打开 会 话 终 澳 ， 以 便 修改 生效 。 


最 后 一 步 : 就 像 要 想 在 任何 地 方 都 能 够 使 用 二 进 制 程序 就 必须 把 它们 放 到 PATH 中 一 样 ，npm 
安装 的 Node 类 库 也 必须 添加 到 NODE_PATH 中 。 可 以 输入 如 下 命令 查看 Node 安 装 类 库 的 位 置 : 


$ npm LS -g 
/usr/local/lib 


(该 命令 同时 还 列 出 了 npm 全 局 安装 的 所 有 类 库 。 去 挥 -g 就 可 以 看 到 安装 在 当前 目录 下 的 所 
有 类 库 。) 我 们 需要 把 该 路 径 下 的 子 目 录 node_module 添 加 到 NODE_PATH 中 。 在 笔者 的 系统 中 ， 就 
是 将 如 下 内 容 添加 到 ~/.profile 文 件 中 : 

export NODE PATH=/usr/local/lib/node modules 

同样 ， 你 的 系统 上 需要 采取 的 操作 步骤 可 能 会 有 所 不 同 。 要 测试 NODE_PATH 是 否 有 效 ， 打开 
一 个 新 的 会 话 终 端 输入 命令 node, 即 可 打开 Node.js 的 REPL 一 一 一 个 交互 式 命令 运行 环境 。 接 着 















































由 系统 环境 变量 。 一 一 译 者 注 
(2 REPL 是 Read-Eval-Print Loop 的 缩写 ， 指 一 种 简单 的 交互 式 计算 机 编程 环境 。 一 一 译 者 注 


4 第 1 章 入 门 指南 


> require('coffee-script') 

我 保证 ， 这 是 本 书 中 唯一 一 行 你 需要 输入 的 JavaScript 代 人 码 ! 

如 果 NODE PATH 设 置 得 不 正确 ， 会 看 到 一 个 Error: Cannot find module “coffee-script” 的 错误 提 
示 。 如 果 只 是 看 到 一 段 很 长 的 对 象 描述 ， 那 就 没有 问题 了 。 完 成 后 ， 可 以 输入 process .exit() 
或 者 使 用 cu -lc 来 退出 Node 的 REPL。 


顺便 说 一 下 ，coffee-script 库 已 经 超出 了 本 书 的 范围 ; 我 能 说 的 就 是 ， 在 CoffeeScript 或 
JavaScript 程 序 中 ， 它 能 让 你 把 CoffeeScript 编 译 成 JavaScript。 你 可 以 基于 此 做 一 些 非常 酶 的 事情 ， 
比方 说 你 可 以 自己 写 一 个 包含 自 定 义 后 期 处 理 " 的 编译 器 ， 或 者 可 以 写 一 个 像 Cakefile 那样 的 打 
包 脚 本 。 


照 ! 我 知道 安 疙 过 程 似乎 花 了 很 多 时 间 , 不 过 请 相信 我 , 既然 我 们 获得 了 为 自己 所 用 的 Node 
和 npm 的 全 部 能 力 ， 那 付出 终 将 获得 回报 。 现 在 让 我 们 来 配置 下 编辑 环境 吧 。 

















在 刀锋 上 起 舞 
如 果 你 一 定 要 用 最 新 的 CoffeeScript， 这 实际 上 也 非常 容易 。 只 需要 使 用 gif 把 CoffeeScript 
的 代码 仓库 ?克隆 下 来 ， 然 后 使 用 npm 从 本 地 目录 中 安装 它 即 可 : 


$ git clone http://github.com/jashkenas/coffee-script.git 
$ cd coffee-script 
$ npm install -g 


这 将 安装 CoffeeScript 当 前 的 master 分 支 ， 它 多 少 有 点 不 稳定 。 可 以 运行 如 下 命令 来 还 原 到 
特定 版 本 的 CoffeeScript ( 比如 说 1.1.1 ): 


$ npm install -g coffee-script@1.1.1 


1.2 ”CoffeeScript 编辑 器 


在 https://github.com/jashkenas/coffee-script/wiki/Text-editor-plugins 上 可 以 找到 一 份 最 新 的 支 
持 CoffeeScript 的 编辑 器 列表 。 如 采 你 使 用 的 是 Mac 系 统 ,， 那 我 推荐 使 用 由 Jeremy Ashkenas 维 护 的 
TextMate 插 件 ”。 在 撰写 本 书 时 ，Vim、Emacs、gedit、jEdit 以 及 IntelliJ IDEA 也 分 别 有 插 件 提 供 了 











GD https://github.com/jashkenas/coffee-script/wiki/%5SBExtensibility%5D-Hooking-into-the-Command-Line-Compiler 

©Q) https://github.com/jashkenas/coffee-script/wiki/%5BHowTo%5D-Compiling-and-Setting-Up-Build-Tools 

@) git 是 一 种 版 本 控制 软件 ， 最 初 用 于 管理 Linux 内 核 的 开发 。 与 常用 的 版 本 控制 工具 CVS、Subversion 等 不 同 ，git 采 
用 分 布 式 的 版 本 库 方式 ， 速 度 快 ， 使 源码 的 发 布 和 交流 及 其 方便 。 一 一 译 者 注 

由 可 访问 https://github.com/jashkenas/coffee-script 获 取 。 详 者 注 

(5) http://github.com/jashkenas/coffee-script-tmbundle 








1.3 “ 狠 抬 ”coffee $ 


对 CoffeeScript 的 支持 。 


最 近 ， 使 用 基于 Web 的 编辑 器 编写 代码 已 成 为 可 能 ， 这 些 编辑 咒 文 持 实时 协作 ,不 依赖 于 任 
何 特殊 的 设备 。 目 前 对 CoffeeScript 文 持 得 最 好 的 Web 编 辑 佣 是 安 狗 了 了 Cloud9 Live CoffeeScript 
Extension2 的 Couldo9 。 


当然 ， 你 可 以 使 用 任何 自己 喜欢 的 编辑 咒 ， 但 是 支持 CoffeeScript 的 编辑 需 会 给 你 毫 来 3 大 优 
势 一 一 语法 高 亮 、 目 动 缩 进 以 及 内 置 的 编 详 快捷 方式 。 前 两 个 优 点 理解 起 来 很 容 多 , 但 是 第 三 个 
优点 是 很 多 程序 员 没 有 好 好 利用 的 部 分 。 

在 TextMate 中 ， 可 以 使 用 中 了 (运行 ) 来 运行 CoffeeScript 文 件 ， 或 者 只 用 蝶 B (生成 ) 来 查看 
编译 后 的 JavaScript。 编译 只 需 儿 室 秒 , 因此 如 果 对 于 一 个 CoffeeScript 表 达 式 如 何 转化 为 JavaScript 
不 是 很 确定 ,那么 快速 编译 就 是 搞 清楚 这 一 过 程 的 最 快 方法 。 如 果 有 被 选中 的 文本 ， 则 这 些 命令 
仪 仪 运行 选中 部 分 的 代码 而 不 是 整个 文件 ， 这 就 让 测试 小 块 代码 以 及 定位 语法 错误 变 得 容易 多 
了 。 如 图 2 所 示 























= 和 TextMate File Edit View Text Navigation Bundles 


arr = [1..3] 

last = x for x in arr i 六 站 全 Run 
console.log "last = #{last}" | 

copy = (Xx for x In arr) Last 一 3 


console.log "copy = #{copy}" 


图 2 ”直接 在 TextMate 中 运行 选择 的 代码 


稍微 注意 下 ， 一 些 编辑 融 ( 包括 TextMate ) 不 会 默认 采用 PATH 值 ， 这 就 意味 着 在 你 试图 运行 
coffee 命 令 时 可 能 会 出 现 类 似 于 command not found 的 错误 。 如 果 遇 到 这 种 问题 ， 打 开 编辑 器 的 配 
置 (可 能 在 Shell Variables 下 面 ) 设置 PATH， 以 匹配 在 终端 中 运行 echo $PATH 命 令 时 得 到 的 输出 
值 。 你 愿意 的 话 也 可 以 顺便 设置 下 NODE PATH。 





1.3 “ 遂 后 ”coffee 


既然 你 已 经 把 编辑 融 设 置 好 了 ， 那 承 是 时 候 介绍 标准 命令 行 编译 希 coffee 了 。 让 我 们 从 必修 
的 “Hello world!” 程 序 开 始 。 打 开 编 辑 咒 ， 创 建 一 个 名 为 hello.coffee 的 文件 ， 添 加 如 下 内 容 : 
console.log 'Hello, world!' 
百 接 运行 它 : 





GD 分 别 在 http://cloud9ide.com 和 https://github.conytanepiper/cloud9-livecoffee-ext 上 可 以 找到 。 
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$ coffee hello,.coffee 

Hello, wortld! 

有 几 件 事情 你 可 能 会 感到 奇怪 : 首先 ，console.10g 吻 数 是 从 哪里 冒 出 来 的 ? (答案 : 它 是 
一 个 Node.js 的 全 局 阴 数 。) 其 次 ，JavaScript 在 哪里 呢 , 不 是 说 CoffeeScript 会 编译 为 JavaScript 吗 ? 

事实 上 coffee 会 将 hello.coffee 隐 式 地 编译 为 JavaScript, 然后 将 输出 结果 和 直接 传递 给 Node, 以 使 
其 立即 执行 。 如 果 这 不 能 满足 你 的 需求 , 可 以 使 用 coffee 众 多 选项 中 的 一 个 或 多 个 , 使 用 coffee -h 
命令 可 以 查看 这 些 选 项 . 


$ coffee -h 














Usage: coffee [options] path/to/script.coffee 


-C, --Compile compile to JavaScript and save as ,js files 

-i, --interactive run an interactive CoffeeScript REPL 

-0，--output set the directory for compiled Java9cript 

-]，--join concatenate the Scripts before compiling 

-Ww, --watch watch scripts for changes, and recompile 

-p, --print print the compiled JavaScript to stdout 

he pipe the compiled JavaScript through JSLint 

-S, --Stdio listen for and compile scripts over stdio 

-e, --eval compile a string from the command Line 

-rr, --require require a library before executing your script 

-b, --bare compile without the top-level function wrapper 

-t, --tokens print the tokens that the lexer produces 

-n，--nodes print the parse tree that Jison produces 
--nodejs pass options through to the "node" binary 

-V, --Version display CoffeeScript version 

-h, --help display this help message 








如 有 果 想 查看 刚才 编译 带 隐 藏 的 JavaScript， 可 以 运行 : 


$ coffee -p hello.coffee 
(function() { 

console.log('Hello, world!'); 
}).call(this); 


可 以 查看 1.3.1 节 “ 包 庄 中 的 JavaScript” 专 题 对 多 余 两 行 代码 的 解释 。 





1.3.1 编译 为 JavaScript 


-c (编译 ) 可 能 是 最 常用 的 参数 ， 它 可 以 把 输出 的 JavaScript 保 存 到 文件 中 。 除 了 使 用 .js 扩展 
名 代替 .coffee 之 外 ， 新 文件 的 文件 名 与 原始 文件 的 相同 。 让 我 们 继续 使 用 咖啡 因 饮料 的 主题 : 

$ coffee -c mochaccino.coffee 

编译 输出 到 相同 路 径 下 的 一 个 名 为 mochaccino.js 的 文件 中 。 使 用 -o (输出 ) 参数 并 让 目标 目 
录 名 称 紧 跟 其 后 ， 就 可 以 把 输出 保存 在 其 他 地 方 : 


$ coffee -co output source 





1.3  “ 狠 抬 ”coffee 了 





该 示例 该 取 source 目 录 (包含 其 子 目 录 ) 下 的 所 有 .coffee 并 把 对 应 的 .js 文件 写 入 output。 注 
意 -co 是 -c-o 的 缩写 。 其 顺序 很 重要 : 输出 目录 名 必须 紧 接 在 -0 之 后 。 

另外 一 个 比较 第 用 的 参数 是 -w (监听 )， 它 可 以 让 coffee 命 令 在 后 台 持 续 运 行 。 结 合 -C， 
它 在 每 次 开发 者 作出 改变 之 后 重新 编 详 代 人 码 。 它 其 至 能 在 多 目录 下 工作 且 能 保持 角 僚 的 目录 文 
件 结构 不 变 。 因 此 ， 如 果 运 行 下 面 的 命令 ，coffee 目 录 下 的 所 有 文件 都 会 不 断 地 被 重新 编译 到 js 
目录 中 : 

$ coffee -cwo js coffee 


它 会 持续 运行 二 到 使 用 ca -le 来 终止 编译 带 

















包 正 中 的 JavaScript 
你 可 能 想 知 道 为 什么 CoffeeScript 编 译 后 的 代码 会 被 包 衰 在 一 个 函数 内 ? 原因 用 一 个 词 来 
说 就 是 命名 空间 。 ee 个 浏览 器 程序 中 ， 它 们 会 被 当做 一 个 大 
的 代码 块 ， 这 容 荔 产生 不 可 预料 的 结果 
// First file 


function declareNuclearWar() { 
alert('Relax. This 1is only a test'); 


} 

window.onload = function() { 
declareNuclearWar(); 

} 


// Second file 
function declareNuclearWar() { 
alert('The bombing begins In 5 minutes.'); 


J] 


写 第 一 个 文件 的 人 , 对 代码 可 能 造成 的 破坏 一 无 所 知 ! 为 避免 发 生 灾难 可 以 把 每 个 文件 用 
一 个 匿名 了 学 数 包 于 起 来 ,这 样 就 隔 开 了 两 个 declareNuclearWar 声 明 (参见 2.2 节 )， 这 种 方式 
叫做 模块 模式 。 


为 了 让 模块 之 间 可 以 互相 通信 ， 必 须 “ 输 出 ”一 些 变量 (我们 会 在 4.1 节 详细 介绍 ) 
如 果 一 定 要 除去 包 计 函数， 使 用 -b (暴露 ) 参数 米 运 行 coffee 命 令 即 可 。 


1.3.2 REPL 


不 带 任 何 参 数 直 接 运 行 coffee 会 进入 编程 老手 所 说 的 REPL， 即 Read-Eval-Print Loop。 通 众 
地 说 ， 就 是 你 输入 点 什么 ， 它 执行 ， 然 后 你 查看 输出 结果 ， 周 而 复 始 。 

这 很 适合 用 来 小 试 一 下 这 门 语言 。REPL 运 行 在 Node.js 环 境 中 ， 并 县 已 会 输出 所 有 表达 式 的 
结果 。 例 如 ， 如 果 我 们 想 回 忆 一 下 JavaScript 中 parseInt 的 某 些 怪异 行为 ， 可 以 这 样 试 试 : 
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$ coffee 

coffee> parseInt '221' 
221 

coffee> parseInt '221b' 
221 

coffee> parseInt 'b221' 
NaN 


coffee 相 关 的 内 容 就 介绍 到 这 里 。 再 顺便 说 一 句 ， 如 有 条 想 了 解 coffee 是 如 何 工作 的 ， 可 以 
查看 带 注释 的 源码 "”。 如 果 你 愿意 ， 甚 至 可 以 对 其 进行 反 向 工程 ， 编 写 自 己 的 CoffeeScript 编 译 央 
接口 ( 就 像 笔 者 写 的 Jitter 一样 )。 

不 要 忘 了 coffee 只 是 一 个 轻 量 级 的 工具 ， 它 并 不 提供 代码 压缩 或 者 编译 后 目 动 运行 测试 之 类 
的 功能 。 如 有 果 想 把 这 些 功 能 添加 到 目 己 的 项 目 中 ,你 就 应 该 编写 自己 的 生成 脚本 , 通 弟 就 是 所 请 
的 Cakefile。 你 可 以 在 CoffeeScript wiki* 上 找到 一 些 Cakefile 相 关 的 文档 。 

几乎 可 以 编写 CoffeeScript 代 码 了 一 一 但 还 有 一 个 问题 ， 如 果 遇 到 错误 该 怎么 办 呢 ? 














1.4 调试 CoffeeScript 


很 多 使 用 类 似 CoffeeScript 这 类 语言 编写 代码 的 人 都 会 遇 到 以 下 问题 , 即 运 行 时 错误 参考 的 是 
编译 后 的 代码 而 不 是 原始 代码 。 这 确实 是 个 问题 ， 而 且 大 家 也 探讨 过 几 个 解决 方案 "”。 可 不 幸 的 
是 ， 目 前 留 给 你 的 只 有 那些 行 号 与 原始 代码 没有 任何 关系 的 栈 跟 踩 信 息 。 

等 好 ，CoffeeScript 编 译 后 的 JavaScript 有 很 强 的 可 该 性 。 如 末 你 了 解 这 两 种 语言 之 间 的 对 应 
关系 〈 我 硕 望 读 完 本 书后 你 能 做 到 这 一 点 )， 那 么 在 原始 CoffeeScript 代 码 中 找到 与 程序 中 出 错 的 
地 方 相 匹配 的 位 置 就 非常 容易 了 。 

虽然 不 其 理想 , 但 这 就 是 站 在 技术 最 前 沿 所 要 付出 的 代价 。 随 着 CoffeeScript 生 态 圈 的 日 渐 成 
熟 ， 工 具 越 变 越 好 ， 扎 踩 错误 将 会 越 来 越 容 吻 。Mozilla 基 金 会 的 那些 家 伙 为 了 给 Firefox 添 加 
CoffeeScript 调 试 支持 正在 拼合 工作。Node 也 不 会 落后 太 远 。 但 在 此 之 前 ， 还 是 彻底 测试 你 的 代 
人 码 ， 使 用 调试 模式 日 志 ， 搞 懂 你 的 JavaScript 代 码 吧 。 


有 中 间 选 择 么 ?” 有 的 , 在 闻 配 了 开发 控制 台 ( 或 者 像 之 前 提 到 的 Firebug Lite 之 类 的 书签 工具 ) 
的 Node.js 或 者 浏览 器 中 , 可 以 使 用 consotLe .Log 来 显示 消息 。 这 可 能 会 有 两 个 问题 : 一 是 你 并 不 
想 要 输出 每 个 细 蔬 ， 二 是 如 果 console.log 不 存在 的 话 你 就 不 会 调用 它 。 通 稼 的 解决 方案 就 是 使 用 
包 少 图 数 , 但 是 这 样 的 话 ， 当 输出 内 容 时 就 无 法 获得 关键 的 JavaScript 代 码 行 号 (因为 所 有 的 日 志 
都 古 从 同一 个 地 方 ， 即 包 壮 函数 里 输出 的 )。 因 此 我 推荐 如 下 方式 : 






































GD http://jashkenas.github.com/coffee-script/documentation/docs/command.html 
@) https://github.com/TrevorBurnham/jitter 

(3) https://github.com/jashkenas/coffee-script/wiki 

(4) https://github.com/jashkenas/coffee-script/issues/558 


1.5 ”预备 9 


window.debugMode = document.Tlocation.hash.match(/debug/) and console? 
console.log 'This is the first of many debug-mode outputs' If debugMode 


在 这 个 例子 中 ， 当 且 仪 当地 址 栏 的 “ 哈 希 ”中 包含 字符 串 debug ( 比如 page.html#debug )， 
并 且 浏 览 需 中 存在 consotLe 对 象 时 ，debugMode 才 为 true。 这 为 你 提供 了 一 种 非常 容易 的 方法 ， 
确保 在 页 面 加 载 时 能 够 开启 或 关闭 输出 所 有 额外 的 信息 .将 debugMode 声 明 为 window 的 属性 可 以 
让 其 成 为 全 局 变量 。 

一 种 更 简单 但 没有 那么 通用 的 方式 是 使 用 吸收 操作 符 ( 详 见 3.1.4 市 ) 以 保证 当 console 存 在 
时 才 调 用 console. log: 





console?,.log 'Thanks to ?, this line is perfectly safe!' 

在 Node 下 ， 有 大 量 的 类 库 ( 可 以 使 用 谷歌 快速 搜索 node logging library ) 能 够 显示 不 同 元 余 
度 的 输出 。 我 的 styout* 也 包含 其 中 ， 它 还 提供 对 控制 台 色 差 输出 的 支持 。 

日 志 信 息 可 以 代替 注释 ,在 开发 过 程 中 它 提 供 了 更 多 关于 代码 如 何 运行 的 信息 。 比 如 ， 下面 
是 一 段 典 型 的 注释 完好 的 代码 : 


area = height * (basel + base2) / 2 
# now we have the area of the trapezoid 


可 以 像 下 面 这 样 ， 调 用 console. log 来 代替 注释 : 


area = height * (basel + base2) / 2 
console.log "The area of the trapezoid is #{area}" if debugMode 


另外 一 种 习惯 是 在 代码 中 使 用 断言 , 标准 的 console 对 象 中 有 一 个 assert 函 数 对 此 提供 很 好 
的 文 持 ， 它 接受 一 个 值 和 错误 信息 作为 参数 〈 信 为 非 芮 时 显示 错误 信息 )。 
fundamentaLLaws = ['death', 'taxes', 'gravity'| 


if debugMode 
console.assert 'gravity' in fundamentaLLaws， 'gravity oughta be a law!' 


最 后 , 编写 结构 良好 的 代码 是 避免 错误 的 最 重要 的 保证 。 尽管 现在 还 不 存在 任何 工具 可 以 指 
出 导致 运行 时 错误 的 确切 代码 行 写 ,但 至 少 应 该 能 够 查 到 程序 中 可 能 引发 错误 的 那 部 分 代码 。 


























1.5 ”预备 


本 章 中 我 们 学 习 了 如 何 使 用 Node.js 和 npm 在 你 的 机 需 上 安装 CoffeeScript。 你 还 使 用 自己 最 爱 
的 编辑 郁 与 这 门 语 言 来 了 次 杂 密 接触 ， 探 究 了 使 用 CoffeeScript 作 为 开发 流程 一 部 分 的 一 些 方法 ， 
并 且 认 识 到 了 调试 工作 的 挑战 性 。 

既然 现在 你 已 经 知道 了 如 何 运 行 CoffeeScript 人 代码， 是 时 候 深 入 了 解 该 语言 自身 的 具体 细 市 
了 。 本 书 的 剩余 部 分 会 有 大 量 小 代码 上段, 跟 上 思路 的 最 好 方法 就 是 在 编辑 器 中 运行 这 些 代码 。 如 








QD) https://github.com/TrevorBurnham/styout 
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采 搞 不 清楚 它们 是 如 何 工 作 的 , 尝试 修改 一 两 行 代 人 码 看 看 会 发 生 什么 。 你 也 可 以 时 不 时 地 看 一 下 
编译 后 的 JavaScript 代 码 。 





想 要 运行 下 面 这 种 涉及 某 个 文件 的 代码 段 ， 还 需要 额外 的 代码 段 才 行 : 


GettingStarted/outofContext .coffee 

foo bar, baz 

那些 并 不 涉及 有 个 文件 的 代码 段 则 能 独立 运行 : 

OK = 'computer' 

console.log 'No alarms and no surprises.' if OK 

请 相信 我 , 如 果 你 的 编辑 咒 配 置 了 运行 命令 的 话 将 更 加 有 趣 ， 只 需 轻 轻 敲 击 快捷 键 就 能 查看 
代码 运行 结果 了 。 这 是 CoffeeScript 初 学 者 的 最 好 伙伴 1 








函数 、 作 用 域 和 上 下 文 








CoffeeScript 的 核心 和 灵魂 由 两 个 字符 组 成 ， ->, 这 就 是 定义 一 个 新 子 数 所 需要 的 一 切 。 不 要 
被 它 的 简洁 所 迷惑 ,我 们 很 快 就 会 看 到 ,也 数 是 一 种 强大 多 变 的 对 象 , 掌 握 它 们 是 掌握 CoffeeScript 
的 第 一 步 。 

虽然 函数 是 本 章 的 主角 , 但 是 沿途 我 们 还 会 遇 到 一 班 欢乐 的 配角 : 变量 、 字 符 串 、 条 件 表达 
式 、 异 稼 以 及 其 他 功能 恨 好 的 函数 所 需要 的 ee 我 们 还 将 复习 两 个 至 关 重 要 的 概念 : 作用 
域 和 上 下 文 , 并 说 明 在 CoffeeScript 中 如 何 继续 沿用 它们 。 然 后 我 们 将 研究 一 些 非常 酷 的 特性 : 属 
性 参数 、 默 认 人 参数 以 及 参数 列 ， 以 此 来 江 en， 数 之 旅 。 

到 那 时 我 们 就 准备 好 着 手 我 们 的 第 一 个 项 目 了 , 该 项 目 将 为 我 们 小 巧 的 拼 字 游 戏 做 一 个 提示 
输入 模块 。 最 后 但 同样 也 很 重要 , 本 章 结 尾 的 练习 将 把 你 刚刚 学 到 的 CoffeeScript 专 业 知识 推 向 一 
个 新 的 高 度 。 























2.1 函数 基础 知识 
终于 开始 定义 第 一 个 函数 啦 ! 来 试 试看 : 


-> 'Hello, functions!' 

我 可 没 说 这 是 一 个 有 用 的 函数 ， 不 是 吗 ? 不 过 它 确实 做 了 点 什么 一 一 返回 了 一 个 字符 串 。 

别 光 上 听 我 说 ， 把 它们 粘贴 到 你 的 编辑 希 中 ， 按 运行 命令 

console.log do -> 'Hello, functions!' 

你 将 收 到 令 人 愉悦 的 问候 : 

Hello, functions! 

do 是 干什么 的 ? 〈 它 与 JavaScript 中 的 do..whitLe 循 环 没有 任何 关系 。) 它 仅仅 表示 “运行 接 下 
来 的 函数 ”。 我 们 本 来 也 可 以 使 用 一 堆 括号 来 达到 同样 的 效果 : 


console.log (-> 'Hello functions!')() 











Hello, functions! 
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兴 许 你 会 问 :“return 关 键 字 哪儿 去 了 ?” 这 里 是 CoffeeScript 从 Ruby 那 里 获得 了 灵感 ， 隐 式 
地 返回 每 个 图 数 的 最 后 一 个 表达 式 的 值 。 你 仍然 可 以 显 式 地 使 用 return， 但 并 不 是 必须 的 。 除 
非 你 想 中 断 执 行 流 ， 否 则 首选 的 做 法 还 是 省 略 return。 如 果 你 不 想 返回 某 些 内 容 ， 单 独 使 用 
return 即 可 。 


到 目前 为 止 ， 我 们 使 用 的 都 是 芽 名 曙 数 。 匿 名 函数 和 目 有 其 用 途 ， 但 这 个 国 数 真 的 盼 看 要 个 
名 字 : 

hi = -> 'Hello, functions!' 

console.log hi() 


我 们 得 到 了 同样 的 啊 应 : 

Hello, functions! 

在 CoffeeScript 中 给 一 个 函数 命名 丈 意 味 看 将 它 赋值 给 一 个 变量 。 注 意 我 们 本 来 也 可 以 瑟 do 
hi 来 蔡 代 hi(), 但 是 从 最 佳 实践 的 角度 来 说 ,通常 只 有 在 创建 闭 包 时 使 用 do， 特 别 是 在 迭代 中 
使 用 do 来 创建 闭 包 。 更 多 信息 详 见 6.3 市 。 

但 是 函数 只 返回 一 个 第 量 有 多 大 用 处 呢 ? 确 实 没 什么 用 。 下 面 让 我 们 把 这 个 函数 变 得 更 加 通 
用 一 点 : 


greeting = (Subject) -> "Hello, #{subject}/" 
console.log greeting 'arguments' 





























'Hello, arguments!' 

我 们 在 -> 之 前 添加 了 一 个 参数 列表 ( subject ) ( 注意 在 函数 调用 时 可 以 省 略 括号 ， 但 在 参 
数列 表 中 不 能 省 ， 除 非 参 数列 表 为 空 。 更 多 细 市 信息 ,请 参见 “ 隐 式 括号 ”专题 )。 而 且 我 们 还 
使 用 了 字符 串 插值 法 把 一 个 表达 式 插 和 人 到 字符 串 中 。 


CoffeeScript 的 字符 串 插值 语法 与 Ruby 的 类 似 : "A#{fexpression}Z" 等 同 于 'A' + 
(expression) + 'Z'， 只 能 在 双 引 号 之 间 的 字符 串 中 使 用 字符 串 插 值 。( 从 编程 风格 来 说 ， 
当 不 使 用 字符 串 插 值 时 我 更 喜欢 使 用 单 引 号 的 字符 串 , 这 样 能 明确 表示 这 里 并 没有 什么 值得 注意 
的 事情 。) 




















关于 两 种 函数 声明 语法 的 故事 
在 JavaScript 中 ， 定 义 函 数 的 方式 有 两 种 ， 一 种 是 这 样 : 
var cubel = function(x) { return Math.pow(x, 3); }; 
另外 一 种 方式 : 
function cube2(x) { return Math.pow(x, 3); } 


如 果 在 cubel 定 义 前 就 调用 它 会 出 错 。 但 在 cube2 作 用 范围 内 
会 自动 向 前 查找 函数 的 定义 。 


这 两 种 方式 最 大 的 差别 是 
可 以 在 定义 之 前 调用 它 ， 解 释 吕 


名 “ 
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由 于 了 正中 一 个 棘 手 的 问题 ，CoffeeScript 永 远 只 会 生成 如 cube1l 这 样 的 变量 式 风格 "的 函数 
声明 。( 由 cCLass 关 键 字 生 成 的 “具名 ” 函 NS 外 , 我 们 会 在 4.3 节 中 看 到 这 一 点 。) 因此 ， 
在 调用 函数 之 前 可 别 忘 了 先 定义 它们 ! 








给 你 一 个 忠告 : CoffeeScript 的 + 操作 符 不 会 忽略 空格 。 因 此 如 下 的 字符 串 连 接 能 正常 工作 : 


squadron = 'Red' 

xWing = squadron + 5 # 'RedS5! 
而 下 面 这 样 就 不 行 : 

squadron = 'Red' 

xWing = squadron +5 # TypeError 





问题 在 于 squadron +5 会 被 编译 为 squadron(+5) (+ 前 绥 是 将 字符 串 转 化 为 数字 的 捷径 )， 
而 squadron 是 字符 串 不 是 函数 ， 所 以 会 抛 给 我 们 一 个 错误 。 了 字符 串 插值 能 帮 你 避免 这 类 麻烦 : 

squadron = 'Red ' 

XWing = "#{squadron}5" # 'Red5' 





2.1.1 访问 arguments 对 象 





正好 提 一 下 ， 无 论 是 否 在 参数 列表 中 有 过 声明 ， 都 可 以 通过 JavaScript 中 的 类 数组 对 象 
arguments 来 访问 传递 给 函数 的 所 有 的 参数 。 例 如 ， 我 们 的 greeting 消 数 可 以 这 样 写 : 

greeting = -> "Hello, #{arguments[0O]}/" 

ead 
为 代价 的 。arguments 作 为 一 个 类 数组 对 象 却 缺少 很 多 普通 数组 对 象 应 有 的 方法 ， 因 此 ,， 它 通 沼 
是 JavaScript 中 让 人 头疼 的 地 方 。 











隐 式 括号 
函数 调用 中 可 以 省 略 括号 的 特性 是 一 把 双 刃 剑 。 如 果 想 要 明智 地 使 用 该 特性 ， 必 须 掌 握 一 
条 简单 的 规则 : 直到 表达 式 末尾 ， 隐 式 括号 才 会 闭合 


不 要 寄 希 望 于 CoffeeScript 能 够 通晓 你 在 做 什么 ， 那 是 新 手 常 犯 的 错误 。 举 个 例子 ， 如 果 
你 写 了 如 下 的 代码 : 


console. log(Math.round 3.1, Math.round 5.2) 


你 可 能 会 惊讶 于 输出 结果 是 3。Math.round 5.2 发 生 了 什么 ” 当 我 们 把 括号 加 上 ， 就 明 
白 了 : 


console.log(Math.round(3.1, Math.round(5.2))) 





QD 即 定义 式 函数 ( 与 之 对 应 的 是 声明 式 函 数 )。 一 一 译 者 注 
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先 计 算 Math, round(5.2)， 但 是 计算 结果 作为 参数 传递 给 了 另 一 个 Math. round(〈 被 它 忽 
略 了 )， 而 不 是 原本 打算 传递 给 的 Consote .Log。 


为 了 避免 这 种 混乱 ,除了 最 外 层 函 数 外 ， 我 都 会 使 用 括号 来 调用 : 


console.log Math.round(3.1), Math.round(5.2) # 3, 5 








幸好 , 在 CoffeeScript 中 几乎 不 需要 直接 与 arguments 对 象 打交道 。 这 多 亏 了 一 个 我 们 将 要 了 
解 的 特性 ， 详 见 2.6 节 。 


2.1.2 条件 表达 式 和 异常 
现在 ， 让 我 们 换 下 口味 ， 写 一 个 数值 处 理 函 数 : 


cube = (num) -> Math.pow num, 3 

请 注意 这 里 的 Math 对 象 ， 作 为 JavaScript 标 准 的 一 部 分 ， 在 CoffeeScript 中 的 用 法 与 其 保持 一 
致 〈 而 且 ， 在 各 种 主流 训 览 偶 或 者 服务 表 站 环境 下 也 神 一 样 )。 

来 点 稍微 复杂 的 ， 比 如 一 个 布尔 判断 : 

odd = (num) -> num % 2 is 1 

% 是 模 操 作 符 ， 它 返回 除 后 的 余数 。is 关 键 字 编译 为 JavaScript 中 严格 等 操作 符 的 === ( 没有 
模拟 JavaScript 的 ==， 参 见 下 面 的 “严格 等 于 或 者 不 等 ”专题 )。 因此， 如 果 给 定 的 数字 是 一 个 不 
能 被 2 整除 的 正 整 数 ，odd 就 返回 true， 反 之 返回 false。( 如 果 说 你 传人 的 是 字符 串 `3` ，% 会 先 
将 其 转换 为 数字 ， 因 此 odd 同 样 会 返回 true。 ) 























严格 等 或 不 等 
CoffeeScript 中 的 js 和 == 都 会 编译 为 JavaScript 中 的 ===。 无 法 使 用 如 JavaScript 中 == 那 样 宽 
松 的 、 强 制 类 型 转化 的 等 于 检查 ， 由 于 很 多 麻烦 都 是 因 它 而 起 ，JSLint 以 及 其 他 类 似 的 工具 者 
不 推荐 这 么 做 。 让 我 们 从 http://wtfjs.com/2011/02/11/all-your-commas-are-belong-to-Array 上 借用 
全 人 


" == new Array(4) /7/ 真 


还 有 一 个 = 违反 等 于 传递 性 的 例子 : 
I // 假 

2 7 

== '0' // 真 


为 了 避免 这 类 令 人 百 思 不 得 其 解 的 问题 ， 你 应 该 自己 显 式 地 进行 类 型 转换 。 
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在 绝 大 多 数 情况 下 , 这 已 经 吓 一 个 相当 完善 的 奇偶 检查 的 函数 了 。 但 假设 你 正在 写 一 个 有 严 
格 规范 的 数学 处 理 库 ， 规 定 如 果 传 递 给 亢 数 的 参数 不 是 一 个 严格 的 正 整数 , 则 应 当 抛 出 异种 。 我 
们 可 以 使 用 条 件 表达 式 来 实现 这 种 需求 ， 如 下 面 这 样 : 


Functions/odd.coffee 


odd = (num) -> 
If typeof num is 'number' 
If num is Math.round num 
If num > 0 
num % 2 1S 1 


else 
throw "#{num} 1is not positive" 
else 
throw "#{num} is not an integer" 
else 


throw "#{num} is not a number" 
请 注意 ， 这 里 使 用 有 效 的 缩 进 而 不 是 JavaScript 中 的 大 括号 来 分 割 函 数 块 和 所 有 的 条 件 分 支 。 
在 CoffeeScript 中 大 括号 只 有 一 种 用 途 : 定义 一 个 JSON 风 格 的 对 象 ”( 更 多 内 容 请 见 第 3 章 )。 
现在 如 果 使 用 除 正 整数 之 外 的 其 他 值 来 调用 odd 函 数 ， 它 会 返回 undefined ( 因为 throw 语 
句 没 有 返回 值 )。 为 了 能 实 实在 在 地 看 到 错误 信息 ， 需 要 使 用 try..catch 块 : 

















Functions/odd.coffee 


try 
odd 5.1 

catch e 
console.log e 


5.1 is not an integer 


通过 依次 对 3 个 条 件 的 简单 检查 ， 我 们 可 以 改善 odd 函 数 的 程序 风格 : 


Functions/odd. coffee 


odd = (num) -> 
unless typeof num is ‘number' 
throw "#{num} is not a number" 
unless num is Math.round num 
throw "#{num} is not an integer" 
unless num > 0 
throw "#{num} is not positive" 
num % 2 is 1 


( 要 不 是 这 些 代 码 有 点 长 ， 我 们 本 可 以 使 用 后 级 表达 式 throw a untess b 来 代 蔡 缩 进 的 做 
法 。) 通常 ， 每 当 条 件 表达 式 引 起 throw 或 return 的 时 候 ， 我 们 就 可 以 把 分 支 逻 辑 简 化 为 简单 的 











OD 即 常 说 的 对 象 字面 量 。 一 一 译 者 注 
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顺序 检查 。 


当然 ， 冰 数 不 仅 限 于 返回 值 或 者 抛 出 异 凋 , 它们 还 能 够 修改 变量 的 值 以 及 调用 其 他 函数 (用 
国 数 式 编程 的 话 来 说 ， 它 们 被 称 做 副作用 )。 其 运行 方式 与 JavaScript 中 的 无 异 : 
count = 0 


IncrementCount = -> COUnt++ 
incrementCount() # count is now 1 


现在 你 了 解 了 如 何在 CoffeeScript 中 定义 和 调用 一 个 孔 数 的 基础 。 但 是 精华 藏 于 细 方 之 中 ， 因 
此 让 我 们 来 看 一 个 最 重要 的 细节 : 变量 在 哪里 可 见 ? 





2.2 作用 域 : 你 在 哪里 看 到 它们 


到 目前 为 止 , 我 们 还 没有 担心 过 变量 的 可 见 性 问题 。 但 不 能 总 是 这 样 高 枕 无 忧 。 考虑 下 这 个 
例子 : 

age = 99 

reincarnate = -> age = 0 

reincarnate() 

console.log "I am #{age} years old" 


如 你 所 想 "， 输 出 如 下 : 
I am © years old 


然而 ,调换 第 一 行 和 第 二 行 代码 的 位 置 : 
reincarnate = -> age = 0 

age = 99 

reincarnate() 

console.log "I am #{age} years old" 


敲 击 “运行 ” 键 ， 这 段 代码 与 之 前 的 代码 完全 不 是 一 回 事 儿 : 
I am 99 years old 

很 奇怪 一 一 reincarnate() 调 用 完全 不 起 作用 ! 我 们 把 age=99 这 一 行 去 反 会 怎样 ? 
reincarnate = -> age = 0 


reincarnate() 
console.log "age = #{age}" 











ReferenceError: age is not defined 
我 们 碰 到 了 一 个 叫做 “作用 域 ” 的 问题 ! 但 什么 是 作用 域 ? 正如 下 面 3 条 规则 所 定义 的 那样 ， 
变量 的 作用 域 就 是 变量 所 处 的 邦 围 : 


(1) 每 个 函数 都 会 创建 一 个 作用 域 ， 且 创建 一 个 作用 域 的 唯一 方法 就 是 定义 一 个 函数 ; 











Q) 如 果 读 者 使 用 的 是 REPL 来 逐 行 运行 这 段 代 码 的 话 ， 结 果 却 是 “I am99 years old”。 原 因 在 于 CoffeeScript 的 REPL 
是 逐 行 编译 JavaScript 运 行 的 ， 请 读者 明 辨 。 一 一 译 者 注 





2.2 ”作用 域 : 你 在 哪里 看 到 它们 17 











(2) 一 个 变量 存在 于 最 外 层 的 作用 域 中 ， 在 该 作用 域 中 ， 该 变量 会 被 赋值 ; 

(3) 变量 在 其 作用 域 之 外 不 可 见 。 

例如 ，age 在 第 一 个 例子 中 的 作用 域 为 全 局 作用 域 ， 在 第 二 个 例子 中 ， 在 全 局 作用 域 中 有 一 
个 叫做 age 的 变量 ， 在 函数 reincarnate 作 用 域内 还 有 一 个 名 为 age 的 变量 ; 最 后 一 个 例子 中 ， 
age 只 存在 于 函数 reincarnate 作 用 域内 。 此 时 我 们 答 试 在 函数 reincarnate 之 外 显示 age 就 会 
得 到 一 个 ReferenceError 的 错误 一 一 在 函数 之 外 不 存在 名 为 age 的 变量 。 


CoffeeScript 处 理 作用 域 采 用 的 方式 就 是 所 请 的 词法 作用 域 ， 这 与 JavaScript 保 持 一 人 改 ， 唯 一 
不 同 的 是 , 在 JavaScript 中 使 用 var 关 键 字 显 式 地 定义 变量 作用 域 ， 而 CoffeeScript 中 则 是 从 赋值 语 
句 中 推 央 出 作用 域 。 这 样 做 不 仅 降 低 了 开发 人 员 的 工作 量 , 还 能 够 防止 变量 被 其 舱 套 作用 域内 的 
另外 一 个 同名 的 变量 所 履 盖 。 参 见 “ 同 名 禾 盖 ”主题 。 





























同名 上 黎 盖 
在 CoffeeScript 中 只 有 两 种 方法 可 以 覆盖 变量 。 一 种 是 如 第 二 个 reincarnate 例 子 中 看 到 
的 那样 ,在 内 部 作用 域 创建 同名 的 变量 之 后 , 在 外 围 作用 域内 创建 一 个 变量 ; 另外 一 种 方法 是 
使 用 函数 参数 ， 


X = 5 

triple = (x) -> x *= 3 
triple x # 15 

X #5 


同名 霍 盖 通常 被 认为 是 一 种 糟糕 的 编程 风格 ， 应 该 尽量 避免 。 给 你 的 变量 起 不 同 的 名 字 ， 
以 防止 埋 下 作用 域 混淆 的 种 子 。 





一 个 函数 的 作用 域 肥 倒 于 为 一 个 作用 域内 ,该 作用 域 为 该 函数 所 在 的 作用 域 (可 别 云 了， 也 
数 也 是 变量 )。 关 于 作用 域 男 外 还 有 重要 的 一 点 需要 理解 : 它 并 不 依赖 于 在 哪里 或 者 如 何 调用 括 
数 。 通 过 观察 代码 或 者 把 它 编 译 为 JavaScript 之 后 查找 var 声 明 (它们 总 是 会 被 放 在 所 属 作 用 域 的 
最 顶部 )， 总 能 确定 变量 的 作用 域 : 

sijngCountdown = (Count) -> 

singBottleCount = (specifyLocation) -> 
LocationStr = If specifyLocation then 'on the wall' else '' 


bottleStr = if count is 1 then 'bottle' else 'bottles' 
console.log "#{count} #{bottleStr} of beer #{locationStr}" 








singDecrement = -> 
console.log "Take one down, pass it around" 
COUNt - - 


singBottleCount true; singBottleCount false 
singDecrement(); singBottleCount true 
if count isnt 0 then singCountdown count 


下 面 是 该 例子 的 编译 输出 ( 除了 产生 作用 域 的 函数 和 存在 于 它们 中 的 var 语 名 之 外 ， 其 他 部 
分 的 代码 部 已 省 略 ): 
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var singCountdown; 
singCountdown = function(count) { 
var singBottleCount, singDecrement; 
singBottleCount = function(specifyLocation) { 
Var bottleStr, locationStr:; 








Se 

} 

Sa 
} 
你 可 能 会 问 ,不 通过 赋值 如 何 给 变量 指定 作用 域 呢 ? 答案 当然 是 不 能 .不 过 ,通常 可 以 将 nut1t 

或 者 其 他 某 些 适合 初始 化 的 值 赋 给 一 个 变量 ， 这 里 有 个 例子 : 

0bj = nuLL 
ijnitialize0b] = -> 

obj = ... # create object with Superpowers 
window.onload = initialize0b] 





关于 CoffeeScript 作 用 域 的 讨论 就 到 这 里 。 现 在 来 看 另 一 个 完全 不 同 的 东西 : this。 


2.3 上 下 文 


作用 域 和 上 上 下文 之 间 关 系 亲 窗 ， 但 是 不 要 把 它们 混淆 。 作 用 域 与 标识 和 从 指 问 什么 变量 有 关 ， 
而 上 下 文 (或 叫做 接收 姨 ) 则 是 与 this 关 键 字 有 关 一 一 CoffeeScript 中 可 将 其 简写 为 @。 

JavaScript 和 和 CoffeeScript 新 手 和 常常 发 现 this 变 化 英 测 。 用 得 好 ， 感觉 就 像 施 了 魔法 ， 用 不 好 ， 
它 就 是 一 个 超级 错误 源 。 坚 无 疑问 ， 混 乱 一 部 分 源 目 这 个 词 本 喘 : 大 家 觉得 this 指 的 是 “this 
Object”( 这 个 对 象 )。 非 也 ， 你 应 该 把 它 看 成 “this context”( 这 个 上 下 文 )。 并 且 很 快 我 们 就 会 
明白 ,一 个 函数 每 次 调用 时 上 下 文 (this/@) 可 能 会 有 所 不 同 。 

(在 继续 之 前 ， 我 要 说 明 一 点 , 使 用 “context”( 上 下 文 ) 这 个 术语 来 描述 this， 虽然 都 流行 
这 么 说 ， 但 是 这 并 不 标准 。 一 些 人 不 赞成 是 因为 在 JavaScript 规 范 中 定义 了 某 个 称 为 “execution 
context”( 执行 上 下 文 ) 的 东西 ， 里 然 和 “context”( 上 下 文 ) 有 点 联系 ,但 其 实 并 不 一 样 。 不 斑 
的 是 , 找 不 到 其 他 普遍 认同 且 能 代表 this 内 涵 的 术语 了 ,因此 贯穿 本 书 , 我 会 继续 以 上 下 文 来 指 
代 它 。) 

让 我 们 使 用 一 个 简单 的 函数 来 考察 几 个 实例 : 























Functions/setName. coffee 


setName = (name) -> Gname = name 


在 这 里 ，name 和 @name 是 两 个 完全 不 同 的 变量 : name (实际 上 可 以 使 用 其 他 任意 名 称 ) 是 一 
个 局 部 变量 ， 无 法 在 函数 之 外 访问 它 ， 而 Gname ( this.name 的 简写 ) 是 上 下 文 的 一 个 属性 。 


上 下 文 的 主要 用 途 是 为 对 象 方法 (作为 属性 附加 的 函数 ) 提供 一 种 方法 来 引用 调用 它 的 对 和 象 : 
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Functions/setName.coffee 


Eat f=} 

cat.setName = setName 

cat.setName 'Mittens’' 

console.log cat.name # 'Mittens' 


当 我 们 调用 cat .setName 时 , 其 实 是 把 cat 作 为 setName 的 上 下 文 来 调用 。 从 而 this( 或 者 @ ) 
代表 的 是 cat，@name 代 表 的 是 cat .name， 呆 数 本 和 冉 没有 人 变化。 我 们 可 以 如 下 面 这 样 调用 .: 
setName 'Mr,. Mistoffelees' 


它 对 cat 就 没什么 影响 。 

我 们 可 以 使 用 call 或 者 apply 方 法 (所 有 孔 数 都 有 这 两 个 方法 )， 在 特定 的 上 下 文中 调用 也 
数 而 无 需 把 这 个 孔 数 附加 到 这 个 对 象 上 。( 如 有 果 你 不 太 清 楚 JavaScript 中 属性 是 如 何 工 作 的 ， 或 者 
无 法 理解 孔 数 就 是 对 象 ， 可 以 先 跳 到 3.1 太 了解 相 关内 容 ， 然 后 再 回来 继续 。) apply 方 法 接受 一 
个 上 下 文 和 参数 数组 并 把 它们 传递 给 函数 : 


Functions/setName.coffee 

pig = 1{} 

setName.apply pig, ['Babe'l] 
console.log pig.name # 'Babe' 


除了 call 接 受 的 是 彼此 分 开 的 参数 而 不 是 一 个 数组 之 外 ，call 的 用 法 和 apply 都 一 样 。 因 此 
与 上 面 等 价 的 代码 可 以 这 样 号 : 

setName.call pig, 'Babe' 

在 实践 中 ，apply 比 call 更 常用 ， 因 为 apply 更 为 通用 : call 只 能 改变 一 个 正常 函数 调用 的 
上 下 文 ， 而 apply 不 但 能 够 改变 上 下 文 而 且 还 能 传递 一 一 个 任意 数量 的 参数 ， 


可 以 使 用 call 或 者 apply“ 借 用 ” 某 个 对 象 的 方法 并 把 这 些 方法 用 到 别 的 对 象 上 : 








Functions/setName.coffee 


horse = {} 
cat.setName.apply horse, ['Mr, Ed'] 
console.log horse.name # 'Mr, Ed ' 


在 这 里 就 算 用 cat.setName 代 替 setName 也 没有 关系 ， 因 为 它们 是 同一 个 函数 。 
使 用 new 关 键 字 是 最 后 一 种 给 函数 传递 上 下 文 的 方法 。 它 会 把 函数 作为 构造 函数 创建 一 个 新 
的 对 和 象 : 





Functions/setName.coffee 


Dog = setName # By convention, constructors are capitalized 
dogl = new Dog('Jimmy’') 

dog2 = new Dog('Jake') 

console.log dogl.name  # 'Jimmy' 

console.log dog2.name # 'Jake' 
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new 关 键 字 指明 :“ 不 要 返回 函数 的 执行 结果 ; 相反 应 该 创建 一 个 新 对 象 ， 以 该 对 象 为 上 下 文 
执行 该 函数 ， 然 后 返回 该 对 象 。”( 我 们 还 可 以 通过 一 个 原型 ， 给 由 new 关 键 字 创建 的 对 象 添 加 额 
外 的 属性 ，4.2 市 会 讲述 相关 内 容 。) 由 于 new 关 键 字 将 新 的 Dog 对 象 设 为 上 下 文 ， 因 此 所 用 Gname 
即 指向 了 新 Dog 对 象 的 name 属 性 。 

如 果 一 个 函数 不 是 被 当做 方法 来 调用 , 或 者 也 没有 用 caLL/appLy 和 new 关 键 字 来 调用 时 , 那 
上 下 文 就 是 全 局 对 象 。 我 们 会 在 4.1 市 学 习 更 多 关于 全 局 上 下 文 的 知识 。 目前 只 要 记 住 , 如 果 this 
指 问 全 局 变量 时 ， 再 使 用 它 通常 不 是 一 件 好 事 。 




















Functions/setName.coffee 


setName “LULU 
console.log name # “LULU 
console.log @name # undefined 


因此 ,可 以 看 出 上 下 文 完 全 是 由 消 数 调用 的 方式 所 决定 的 。 与 作用 域 不 一 样 ,， 它 与 函数 在 哪 
里 定义 没有 关系 。( 当然 ， 我 们 津 第 希望 以 定义 函数 的 位 置 来 决定 其 上 下 文 。 池 运 的 是 ， 有 一 种 
巧妙 的 方法 可 以 有 效 实现 这 点 需求 。 我 们 会 在 紧 接 的 小 市 接触 这 种 方法 )。 

回忆 一 下， 下面 对 CoffeeScript 中 上 下 文 的 规则 做 个 总 结 ， 前 面 的 规则 优先 于 后 面 的 规则 : 


(1) 函数 调用 之 前 知 有 new 关 键 字 ， 则 上 下 文 为 新 建 的 对 象 ; 

(2) 使 用 calLt 或 者 appLy 调 用 函数 时 ， 给 定 的 第 一 个 参数 即 为 上 下 文 ; 

(3) 否则 ， 吧 数 作为 对 象 的 属性 (obj .func) 或 者 obj[ 'func ' ] ) 来 调用 时 ， 它 就 把 该 对 象 作 
为 上 下 文 来 运行 ; 

(4) 如 果 与 上 述 几 条 都 不 符 ， 则 郴 数 在 全 局 上 下 文中 运行 。 

我 们 将 在 4.1 节 了 人 解 更 多 全 局 上 下 文 的 知识 。 














函数 绪 定 : this 就 是 this 


有 时候 无 论 函 数 是 在 哪里 被 调用 , 你 都 希望 它 在 当前 的 上 下 文中 运行 。 这 在 事件 回调 时 最 为 
各 见 。 比 如 ， 你 硕 望 有 人 在 你 的 voicemait 数 组 (与 当前 的 上 下 文 绑 定 ) 中 留言 ， 那 你 可 能 会 这 
样 写 : 

callback = (message) -> @voijicemail.push message 

但 是 你 一 定 会 发 现 ， 当 caLLback 并 没有 被 特定 对 象 调用 时 ，this 下 接 指 癌 的 是 全 局 对 象 ， 
或 者 , 某 些 其 他 类 库 通 过 call 或 者 apply 指 定 的 上 下 文 。 难道 就 没有 一 种 办 法 可 以 使 this 总 是 指 
问 同一 个 对 象 而 不 用 管 函 数 的 调用 方式 ? 

在 JavaScript 中 可 以 实现 这 种 需求 ,但 是 需要 引入 大 量 的 模板 化 代码 ( 参见 “=> 是 如 何 工 作 
的 ”专题 ,不 过 值得 一 提 的 是 ECMAScripts ， 新 一 代 浏 览 带 郡 文 持 这 一 标准 ， 它 在 Function 原 型 
上 提供 了 一 个 比较 简单 的 bind 函 数 )。 幸好 , CoffeeScript 使 函数 绑 定 到 当前 上 下 文 变 得 非常 简单 ， 
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人 简单 到 仪 仪 只 是 一 个 字符 的 改变 : => 代 和 奉 ->。 我 们 把 => 称 作 “ 郴 数 绑 定 操作 符 ” ， 或 者 不 太 正 规 
闻 


于 是 我 们 的 caLLback 函 数 变 成 了 这 样 ; 


callback = (message) => Gvoicemail.push message 


现在 我 们 可 以 舒 口 气 『, 可 以 保证 , 无 论 该 机 数 在 哪里 调用 ,函数 内 部 this 的 意思 与 印 数 定 
义 时 所 在 位 置 的 this 是 一 样 的 ! 


你 可 能 会 想 为 什么 不 每 次 部 使 用 => 来 代 督 -> 呢 ?” 有 两 点 原因 。 首先 , 绑 定 代码 会 造成 文件 大 
小 和 执行 时 间 的 开销 ， 而 这 些 开销 通 第 是 没有 必要 的 。 但 更 重要 的 一 点 是 , 虽然 上 下 文 多 变 的 性 
质 叫 人 迷惑 ,但 是 它 也 能 衍生 出 非常 优雅 的 代码 。 例 如 , 很 多 类 库 会 通 过 上 下 文 给 回调 函数 传递 
关键 信息 。 这 里 有 一 个 简单 的 例子 〈 会 在 第 5 章 展 开讲 ): 


$('#clickToHide').click -> $(this).hidel() 

比 起 严格 地 只 使 用 普通 函数 或 绑 定 函数 ， 在 每 次 定义 一 个 使 用 this/@ 的 函数 时 ， 你 更 需要 
仔细 考虑 一 下 上 下 文 应 该 是 什么 。 

作用 域 和 上 下 文 就 讲 到 这 里 一 一 鉴于 你 已 经 是 一 个 图 数 方面 的 专家 了 ! 下 面 几 闻 会 讲 一 些 非 
党 有 用 的 语法 糖 ， 然 后 就 着 手 开 始 游戏 项 目的 第 一 个 迭代 开发 了 了 。 




















2.4 属性 参数 (@arg) 
还 记得 我 们 定义 的 那个 用 来 给 其 上 下 文 的 属性 赋 上 参数 值 的 函数 吗 ? 


setName = (name) -> Gname = name 
不 销 ， 恰 好 CoffeeScript 为 此 提供 一 个 好 用 的 简写 方式 : 


setName = (Gname) -> # no code required! 





=> 是 如 何 工 作 的 
在 JavaScript 中 我 们 可 以 如 下 实现 callback = (message) => G@voicemaitL.push message: 


var callback; 
callback = (function( this) { 
var _func = function(message) { 
return this.voicemail.push(message); 
] 
return function() { 
return _func.apply( this, arguments); 


jrE 
}) (this); 
DOD, @ 
最 外 层 的 函数 接受 当前 上 下 文 this 作 为 ”this 参数 。 
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”func 包 含 了 我 们 想 绑 定 当 前 上 下 文 的 代码 块 。 
© 
这 里 定义 的 匿名 函数 是 真正 的 caLLback。 因 此 当 调 用 caLLback 时 ， 它 的 参数 被 传递 给 
上 下 文 为 ” ”this 的 func， 然后 返回 ”func 的 执行 结果 。 
注意 ， 永 远 都 不 会 用 到 传递 给 callback 自 己 的 上 下 文 ， 并 且 ”func 永 远 不 会 暴露 ， 这 就 
确保 它 总 是 在 定义 CaLLback 时 的 上 下 文中 被 调用 。 
事实 上 ，CoffeeScript 使 用 的 是 一 个 名 为 ”bind 的 辅助 函数 ， 但 是 基本 的 技巧 是 一 样 的 。 
=> 应 该 是 CoffeeScript 最 强大 的 简写 了 。 
韭 常 简洁 ， 当 @ 位 于 也 数 的 一 个 参数 名 称 之 前 ， 这 个 函数 会 日 动 把 参数 赋值 给 上 下 文 对 象 
this 的 同名 属性 。 
这 对 构造 函数 最 有 价值 ， 在 第 4 章 我 们 会 接触 很 多 构造 函数 。 只 是 为 了 给 实例 对 和 象 设置 内 部 
属性 构造 函数 就 传递 四 五 个 参数 的 情况 很 普 裔 。 使 用 语法 @argument 来 椅 代 的 话 ， 就 可 以 市 省 好 
多 行 代码 了， 多 棒 呀 1 











2.5 默认 参数 Carg=) 
假设 你 有 一 个 函数 ， 它 的 一 个 参数 在 绝 大 多 数 时 候 都 是 某 一 特定 值 ， 就 像 下 面 这 样 : 


ringFireAlarm = (isDrill) -> 
# it's pretty much always a drill 











如 果 把 更 常见 的 ringFireAlarm true 简 写 为 ringFireAlarm() 难 道 不 是 更 好 吗 ” 对 ， 可 以 
这 样 实现 : 
ringFireAlarm = (isDrill) -> 
lisDrill = true unless isDrill? 


这 里 的 unless (expression) 是 if not (expression) 的 简写 。IsDril1? 中 的 ?是 存在 判断 
运算 从， 它 用 来 检查 给 定 变 量 (1) 在 当前 作用 域 是 否 存 在 ，(2) 它 并 不 是 undefined 和 null 的 人 简写。 
你 应 该 把 x? 解 读 为 “x 存在 ”。 

存在 判断 运算 符 也 可 以 放 在 两 个 变量 之 间 : a? 为 真 时 a ? b 返 回 a， 否 则 返回 b。 它 还 可 以 结 
合 = 形 成 一 个 复合 赋值 运算 符 : c ?= d 是 c = d unless c? 的 简写 ， 可 以 将 其 解读 为 “d 为 c 的 
默认 值 ”。 

ringFireAlarm = (isDrill) -> 

lisDrill ?= true 











当然 ， 从 本 节 的 标题 就 可 以 推测 出 ， 还 有 一 种 更 简 清 的 形式 : 
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ringFireAlarm = (isDrill = true) -> 


你 可 能 会 问 :“ 为 什么 把 所 有 时 间 都 花 在 讨论 存在 判断 运算 符 上 ? ”有 两 个 原因 。 首 和 完 ， 存 
在 判断 操作 符 很 灵活 ; 再 者 ，CoffeeScript 中 的 默认 参数 与 其 他 语言 ( 比如 Ruby、Python 和 PHP 等 ) 
的 默认 参数 有 所 不 同 。 在 那些 语言 中 ， 传 递 给 函数 的 参数 个 数 很 重要 一 一 只 有 在 无 参数 调用 
ringFireALarm 时 ，isDriLL = true 才 会 被 执行 。 相 比 之 下 ，CoffeeScript 状 后 使 用 的 是 存在 判 
断 运 算 符 。 也 就 是 说 ， 显 式 地 传递 nuLL 或 者 undefined 都 等 同 于 省 略 参数 。 


如 果 不 小 心 , 可 能 导致 一 些 令 人 不 快 的 意外 , 但 它 的 优点 也 在 于 更 加 灵活 。 可 以 使 用 有 多 个 
默认 值 的 参数 ,调用 者 可 以 使 用 任何 子 集 作为 默认 值 ， 就 像 下 面 这 样 : 


chooseMeals = (breakfast = 'waffles', lunch = 'gyros', dinner = 'piZzZza') -> 














chooseMeals null, 'burrito', null # not a gyro fan 

当然 ， 通 过 基于 arguments ,Length 的 赋值 条 件 ， 可 以 实现 更 为 传统 的 默认 参数 行为 。 但 如 
采 真 的 这 么 做 ， 你 应 该 问 一 下 目 己 ， 真 的 震 要 接受 一 个 nuLL 值 作为 参数 吗 ? 就 不 能 使 用 false、 
NaN 甚 至 目 定 义 类 型 来 代替 吗 ? 





or= 的 真相 
可 能 有 人 写 过 这 样 的 代码 : 
a or= b 


这 种 方法 (或 者 与 之 等 价 的 方法 a ||= b) 能 把 a 的 默认 值 设 为 b。 这 到 底 与 a ?= b 有 什 
么 不 同 ? 


答案 与 “可 靠 性 ”有 关 。 在 CoffeeScript 中 (JavaScript 中 也 一 样 )， 所 有 的 值 都 会 被 布尔 有 还 
辑 操 作 符 隐 式 地 转换 为 布尔 值 , 操作 符 除 了 && 和 ||( 在 CoffeeScript 分 别 为 and 和 or ), 还 有 if"。 
绝 大 部 分 的 值 转化 后 都 为 true， 除 了 少数 几 个 特别 的 ，nuLL、undefined、0 和 空 字符 串 会 转 
化 为 false。 


在 布尔 操作 符 的 返回 值 处 理 上 也 沿用 了 这 种 宽松 、 灵 活 的 布尔 逻辑 处 理 方 式 。 尽管 在 有 些 
语言 中 ， 表 达 式 9 Or b 只 返回 true 或 者 false， 但 在 CoffeeScript (与 JavaScript 一 样 ) 中 ， 如 
果 a 为 真 则 返回 a， 否 则 返回 b。( 如 果 x 和 y 都 为 真 则 表达 式 x and y 返 回 Y， 都 为 假 则 返回 X， 
一 真一 假 时 就 返回 值 为 假 的 表达 式 。) 


这 给 我 们 提供 了 很 多 有 用 的 快捷 方式 ， 和 包括 a = a or b (通常 简写 为 a or= b )， 它 相当 
于 说 “如 果 a 为 假 的话 就 把 b 的 值 赋 给 a”。 虽 然 没 有 a ?= bb 方便， 但 也 不 错 。 





@ 实际 上 还 包括 ! ( 非 ， 在 CoffeeScript 中 为 not )、whiLe、do 以 及 for 循 环 等 其 他 需要 布尔 判断 的 地 方 。 
一 译 者 注 
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还 有 一 点 值得 一 提 一 一 任何 表达 式 部 可 以 用 作 上 默认 参数 ,尽管 一 般 并 不 推荐 这 样 做 。 如 琳 这 
样 做 了 ,表达 式 将 在 该 限 数 被 调用 的 上 下 文中 执行 ,而且 ,除非 已 经 被 赋值 了， 否则 它 束 会 在 孙 
数 体内 的 任何 表达 式 执行 之 前 执行 。 也 就 是 说 ， 下 面 两 个 表达 式 完全 相同 ， 第 一 种 方法 : 


dontTryThisAtHome = (noArgNoProblem = @iHopeThisWorks()) -> 











万 外 一 种 方法 : 
dontTryThisAtHome = (noArgNoProblem) -> 
noArgNoProbLem ?= @iHopeThisWorks!() 


在 开始 第 一 个 项 目 之 前 ,还 剩 最 后 一 个 特性 要 介绍 , 而 且 这 个 特性 非常 了 不 起 。 过 去 还 从 来 
没有 出 现 过 功能 那么 强大 的 小 点 …… 





2.6 ”参数 列 (...) 


在 JavaScript 中 接受 变 长 参数 是 一 件 很 简单 但 同时 也 很 复杂 的 事情 :说 简单 是 因为 传递 给 苯 数 
的 所 有 参数 (无 论 在 图 数 中 是 否 声 明 过 ) 都 可 以 通过 arguments 对 象 获取 ; 说 它 复 杂 则 是 因为 
arguments 并 不 支持 像 sSLice 和 shift 之 类 的 标准 Array 对 象 的 方法 。 


全 好 ,CoffeeScript 能 够 目 动 将 任意 范围 的 参数 转换 到 一 个 数组 中 , 方法 就 是 在 参数 名 后 面 添 
加 一 个 省 略 号 ... (又 称 “参数 列 ” )。 


refine = (wheat, chaff...) -> 
console.log "The best: #{wheat}" 
console.log "The rest: #{chaff.join(', ')}" 


参数 列 在 这 里 的 意思 就 是 “除了 第 一 个 参数 wheat 外 ， 将 剩余 的 其 他 参数 合并 到 chaff 数 组 
中 ”。 使 用 4 个 参数 调用 refine 的 结果 如 下 : 


refine 'great', 'not bad', 'so-so', 'meh' 


























The best: great 
The rest: not bad, so-so, meh 


如 有 果 没 有 或 上 只 有 一 个 参数 ， 那 chaff 就 是 一 个 空 数组 。 
参数 列 不 是 非得 位 于 参数 列表 的 最 后 面 。CoffeeScript 编 译 器 能 够 聪明 地 把 恰当 的 参数 放 到 该 
数组 中 。 


sandwich = (beginning, middle..., end) -> 





韭 参 数列 参数 优先 赋值 。 所 以 ， 如 果 只 传递 两 个 参数 来 调用 sandwich 握 数 ， 则 这 两 个 参数 
将 变 成 beginning 和 end。 只 有 存在 3 个 或 3 个 以 上 的 参数 时 才 会 有 参数 放 到 middle 中 。 参 数列 会 





J 经 查阅 网 络 和 部 分 图 书 ， 一 般 将 splat 翻 译 为 参数 列表 ， 鉴 于 本 书 中 参数 列表 自 有 所 指 ， 故 将 其 译 为 与 之 相似 但 以 
示 区 别 的 “参数 列 "， 请 读者 明 辨 。 一 一 译 者 注 
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吸收 掉 所 有 多 余 的 参数 。 
束 拭 参数 列 参 数 排 在 最 前 面 ， 普 通 参 数 也 有 优先 权 : 


spoiler = (filler..., theEnding) -> console.log theEnding 
spoiler 'Darth Vader 1s Luke\'s father!' 


Darth Vader is Luke's father! 

当然 , 一 个 给 定 的 函数 只 有 一 个 参数 列 参数 才 有 意义 。 要 不 然 ,， 这 些 参数 列 就 会 为 了 如 何在 
它们 之 间 分 割 参数 而 产生 苋 争 了 。 

值得 一 提 的 是 ， 在 不 使 用 也 数 的 情况 下 ， 参 数列 还 是 可 以 用 来 分 割 数组 。 打 开 REPL ( 直接 
运行 coffee， 无 参数 ， 还 记得 吗 ? )， 人 简单 试 一 下 这 个 特性 : 

coffee> birds = ['duck', 'duck', 'duck', 'duck', 'goose!'] 

coffee> [ducks..., goose] = birds 


coffee> ducks 
duck,duck,duck, duck 


我 们 会 在 3.6 广 中 对 这 个 语法 特性 进行 更 深入 的 学 习 。 

在 孙 数 调用 中 , 参数 列 的 意义 与 它们 在 参数 列表 或 者 模式 匹配 赋值 中 的 意义 恰恰 相反 : 后 两 
者 会 把 一 个 数组 展开 为 一 系列 的 参数 ， 而 不 是 把 一 系列 参数 放 到 一 个 数组 中 ， 上 再 次 回 到 REPL 试 
试看 : 


coffee> console.log 1, 2, 3, 4 
1l1234 

coffee> arr = [1, 2, 3] 
coffee> console.log arr, 4 
[L723 ] 4 

coffee> console.log arr..., 4 
1l1234 


你 可 能 已 经 猪 到 了 ， 这 种 语法 在 内 部 使 用 了 apply 方 法 ( 2.3 市 已 经 提 到 过 )。 


但 愿 本章 让 你 学 到 了 很 多 东西 。 现 在 是 时 候 用 一 个 小 项 目 将 所 有 学 到 的 知识 贯穿 到 一 起 了 ， 
之 后 则 是 帮助 你 理解 的 练习 题 。 
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还 记得 我 们 小 小 拼 字 游戏 ( 参见 3.4 市 ) 的 点 子 吗 ? 好 了 ， 是 时 候 把 它 变 为 现实 了 1 现在 ， 
我 们 还 不 具备 哈 锅 表 、 数 组 和 循环 的 相关 知识 来 现实 一 个 具有 完整 功能 的 版 本 (我们 将 在 第 3 革 
补 上 这 些 知识 ),， 但 我 们 至 少 可 以 通过 使 用 Node.js 实 现 一 个 命令 行 提示 模块 来 小 试 身手 。 

但 开始 之 前 ， 必 须 先 搞 懂 什么 是 无 阻塞 IO。 在 大 多 数 语言 中 ， 可 以 像 下 面 这样 写 : 

jnput = getInput ( ) 

# now process input..., 
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getInput 了 因数 会 一 百 等 着 用 户 输入 然后 返回 输入 值 。 这 叫做 阻塞 的 IO ， 因 为 getInput 郴 数 
会 阻塞 程序 执行 下 到 有 东西 输入 。 


然而 ， 我 们 不 能 用 Node 这 么 做 ， 因 为 《除了 少数 几 个 函数 名 以 Sync 绪 尾 的 快捷 函数 外 ) 它 
的 IO 是 无 阻塞 的 。 相 反 ， 震 要 给 Node 一 个 回调 函数 ， 该 冰 数 只 有 在 输入 事件 触发 时 才 运行 《我 
们 将 在 6.3 节 深入 学 习 )。 在 Node 中 与 上 面 最 接近 的 类 似 代 码 是 : 

stdin.on 'data', (input) -> 

# now process input... 

(stdin 对 象 还 需要 进行 一 些 初始 化 ,我 们 稍 后 就 会 接触 到 。) 如 末 你 习惯 了 阻塞 IO 的 话 ， 切 
换 到 无 阻塞 IJO 可 能 会 有 点 不 目 在 。 但 是 这 么 做 的 好 处 显而易见 ， 因 为 长 久 以 来 ， 等 符 输 入 〈 等 行 
输出 也 是 ， 只 是 程度 比较 低 ) 就 是 性 能 损耗 和 扩展 性 有 限 的 主要 原因 。 虽 然 这 对 普通 程序 来 说 不 
是 什么 大 问题 , 但 是 对 于 设计 在 等 待 输入 时 仍然 可 运行 的 程序 是 一 个 好 习惯 , 实质 上 Node 会 迫使 
你 养 成 这 样 的 习惯 。 唯 一 能 够 实现 一 个 阻塞 IO 函数 的 方式 是 使 用 C++ 来 写 一 个 原生 的 扩展 。 

因此 ， 来 稍微 思考 下 程序 的 结构 。 下 面 是 应 该 做 的 事情 : 

(1) 提示 输入 第 一 个 方 格 的 坐标 (x,y); 

(2) 如 果 输 入 有 效 ( 两 个 整数 ， 每 个 都 必须 在 1 到 网 格 的 尺寸 之 间 )， 则 提示 输入 第 二 个 方 格 
的 坐标 ; 

(3) 再 一 次 验证 输入 有 效 性 。 如 末 输 入 有 效 则 提示 正在 交换 这 两 个 方块 ， 如 采 输 入 无 效 ， 则 
说 明 原 因 ， 提 供 继续 尝试 的 机 会 。 

让 我 们 从 “打开 ”标准 输入 流 开始 : 






































Functions/5x5/prompt. coffee 


stdin = process.openStdin() 
stdin.setEncoding 'utf8'" 


process 是 从 哪里 来 的 ? 它 是 Node 环 境 的 一 部 分 ， 少 数 几 个 不 需要 require 语 句 就 能 访问 
的 部 分 之 一 。process 提 供 了 一 些 方法 用 于 获取 命令 行 参 数 、 管 理 内 存 以 及 用 于 处 理 标 准 IO 的 
方法 。 

如 朱 现 在 (通过 coffee prompt coffee ) 运行 程序 , 我 们 会 不 断 得 到 系统 的 提示 。( [Cul + 
是 你 的 好 帮手 。) 每 次 硕 击 [Returm| "时 ，Node 都 会 寻找 一 个 回调 函数 把 输入 值 传 给 它 。 没 有 给 它 回 
调 函 数 ， 因 此 什么 都 没有 发 生 。 修 改 一 下 就 好 。 








Functions/5x5/prompt. coffee 


jnputCallback = nuLL 
stdin.on 'data', (input) -> inputCallback input 


GD 苹果 键盘 的 Retum 键 相当 于 “Enter”( 回 车 ) 键 。 一 一 译 者 注 
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stdin.on 'data' 调 用 就 是 告诉 Node:“ 每 当 有 一 行 新 的 输入 ， 就 把 它 传 给 这 个 函数 。” 这 个 
函数 仅仅 是 把 输入 传递 给 另外 一 个 函数 inputCaLLback。 更 确切 地 说 ,， inputCallback 之 后 会 变 
成 一 个 国 数 一 一 但 它 现在 只 是 nuLL。 为 什么 要 这 么 做 ? 因为 这 个 代理 函数 让 我 们 很 容易 就 能 改变 
回调 函数 的 行为 。inputCaLLback=nuLL (null 是 随意 写 的 ) 这 一 行 是 告诉 编译 器 赋予 该 变量 模 
块 级 别 的 作用 域 ， 这 样 就 允许 在 匿名 函数 外 对 其 进行 修改 了 。 

注 章 如果 我 们 想 为 stdin.on “data' 设 置 多 个 回调 函数 ， 它 们 会 位 单 地 “ 堆 若 ”在 一 起 ， 
此 在 有 新 的 输入 进来 时 ， 每 个 回调 函数 都 会 被 调用 。 如 果 保 存 了 监听 函数 "的 引用 ， 就 可 以 使 用 
stdin, removeListener 给 已 存在 的 回调 函数 解除 绑 定 ， 但 这 涉及 两 步 〈 解 绑 定 和 绑 定 )。 如 末 
不 这 么 做 ， 我 们 就 只 需 改 变 一 下 inputCaLLback 的 值 。 


这 个 简单 的 程序 会 有 两 种 “状态 ”: 提示 输入 第 一 个 方块 的 坐标 和 提示 输入 与 之 对 应 的 第 二 
个 方块 的 坐标 。 状 态 切换 也 就 是 简单 显示 一 条 信息 然后 再 设置 下 inputCaLLback: 

















Functions/5x5/prompt ,coffee 
promptForTilel = -> 
console.log "Please enter coordinates for the first tile," 
ijnputCallback = (Input) -> 
promptForTile2() If strToCoordinates input 
当 有 新 的 输入 进来 时 , 回调 函数 用 未 定义 的 strToCoordinates 国 数 进行 检查 , 如 果 它 表 
示 可 以 继续 ， 则 我 们 就 把 控制 权 移交 给 镜像 的 提示 输入 ， 以 此 来 获取 第 二 个 需要 移动 的 方 格 
坐标 : 





Functions/5x5/prompt.coffee 


promptForTile2 = -> 
console.log "Please enter coordinates for the second tile,." 
ijnputCallback = (Input) -> 
If strToCoordinates input 
console.log "Swapping tiles..,.done!" 
promptForTilel() 


现在 ,验证 是 怎样 的 呢 ?” 好 ,我 们 就 完 号 一 个 人 简 蛙 的 测试 来 验证 菏 个 (x,y) ( 以 零 为 基准 ) 坐 
慰 是 否 在 网 格 上 : 





Functions/5x5/prompt ,coffee 


GRID SIZE = 5 
InRange = (x, y) -> 
0 <= x < GRID SIZE and 0 <= y < GRID SIZE 


中 即 指 已 绑 定 的 回调 函数 。 一 一 译 者 注 
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GRID _ SIZE 全 大 写 表 明 它 是 一 个 尝 量 〈 这 是 一 种 编程 风格 惯例 ， 不 是 为 了 编译 善 方便， 而 是 
为 了 便于 我 们 阅读 )。 该 函数 利用 了 CoffeeScript 的 链 式 比较 的 特性 : 9 <= x < GRID_ SIZE 是 (0 <= 
x) and (x < GRID SIZE) 的 缩写 。 


还 有 为 外 一 个 简单 的 测试 来 验证 数 子 是 否 为 整数 : 








Functions/5x5/prompt. coffee 


jsInteger = (num) -> 
num is Math.round (num) 


现在 让 我 们 使 用 这 几 个 函数 完成 一 个 神奇 的 字符 串 一 坐标 转换 融 , 再 通过 添加 友好 的 出 错 提 
示 信 息 让 它 更 完善 : 


Functions/5x5/prompt.coffee 


strioCoordinates = (input) -> 
halves = input.split(',') 
if halves.length is 2 
x = parseFloat halves[0] 
y = parseFloat halves[1] 
If !isInteger(x) or !isInteger(y) Or !inRange(x) or !inRange(y) 
cf hoe an TnNftoanNnoaer 1 


ANncAlAa 1nn "Farh NNArAdATNna2Foa mi 
WJ [a TA Co 
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else If not inRange x - 1, y -1 
console.log "Each coordinate must be between 1 and #{GRID SIZE}," 


else 


{x, y} 
else 
console.log 'Input must be of the form xXx, y .'! 


你 可 能 想 知道 , 在 两 个 inputCaLLback 实 现 中 ,图 数 是 怎么 计 if 条 件 进行 判断 的 。 是 这 样 ， 
consotLe,.Log 返 回 值 为 undefined, 这 在 条 件 判 断 时 会 强制 转化 为 false, 而 其 他 非 空 对 象 会 强 
制 转换 为 true。 因 此 我 们 要 么 返回 {x,y}， 要么 输出 错误 信息 ， 这 样 我 们 就 考虑 到 了 所 有 可 能 
的 布尔 值 。 

现在 还 缺少 最 后 一 块 : 我 们 需要 从 某 种 状态 开始 , 以便 inputCallback 在 调用 之 前 就 已 经 获 
得 了 定义 : 


Functions/5x5/prompt.coffee 


console.log "Welcome to 5x51!" 
promptForTilel() 


好 了 ， 就 是 这 样 ! 运行 prompt .coffee， 亲 自 试 试 。 它 看 起 来 应 该 如 图 3 所 示 。 
但 愿 你 已 经 开始 欣 簧 CoffeeScript 晒 数 强 大 的 能 力 和 灵活 的 语法 了 。 下 一 章 我 们 将 学 习 如 何 使 
用 对 象 和 数组 ， 并 且 会 把 标准 IO 的 小 实验 转变 为 一 个 功能 完备 的 游戏 。 
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-本 . 靖 全 Terminal — env — 80x24 


5x5 $ coftee prompt. coftee 国 
Helcome to SxS! 
Please enter coordinates tor the first tile. 


贞 ,日 

Each coordinate must be an integer. 

7,8 

Each coordinate must be between 1 and 5. 

1,2 

Please enter coordinates tor the second tile, 
.pe | 

Swapping tiles... done! 


Please enter coordinates tor the first tile. 


图 3 ”运行 中 的 命令 行 版 的 提示 输入 


2.8 ”做 得 好 ， 年 轻 的 学 徒 


可 以 很 有 把 握 地 说 ， 你 现在 对 CoffeeScript 的 了 解 已 经 超越 了 7 地球 上 99.999% 的 人 。 你 已 经 学 
习 了 如 何 定 义 、 调 用 也 数 ,以 及 从 函数 中 返回 值 。 你 还 了 解 到 函数 会 创建 作用 域 ， 以 及 上 下 文 变 
量 this 是 一 个 变化 无 种 的 精灵 ， 它 依赖 于 咖 数 被 调用 的 方式 一 一 除非 晒 数 在 定义 时 使 用 => 来 绑 
定 其 定义 时 的 上 下 文 。 

我 们 还 从 CoffeeScript 的 其 他 诸多 特性 中 选取 了 几 个 来 学 习 , 包括 if/unless、try...catch.、 
默认 参数 和 属性 参数 等 。 然 后 我 们 使 用 这 些 特性 写 了 一 个 基于 Nodejs 命 令 行 的 简单 程序 。 

关于 CoffeeScript， 我 们 只 有 两 个 方面 还 没有 接触 过 : 集合 ( 对 象 和 数组 ) 和 迭代 (循环 )。 
凑巧 的 是 ， 它 们 束 是 下 一 章 的 主题 。 

但 是 在 我 们 继续 之 前 ， 先 用 下 面 这 些 练习 测试 下 你 的 知识 。 你 不 会 想 跳 过 它们 吧 ? 相信 我 ， 
它们 能 避 倪 你 将 来 吃 舌 头 。 




















2.9 练习 


(1) 下 面 的 男 数 将 删除 给 定数 组 中 的 所 有 元 素 ， 然 后 返回 spLice 的 返回 值 ， 在 这 里 即 是 原始 
数组 的 一 个 副本 。( 我 们 将 在 3.2.2 节 和 学习 更 多 关于 这 个 特殊 函数 的 知识 。) 
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clearArray = (arr) -> 
arr.splice 0，arr.Length 

如 何 让 ctearArray 返 回 被 清空 的 数组 ? 又 如 何 让 它 什 么 都 不 返回 呢 ? 

(虽然 这 是 一 个 微 不 足 违 的 例子 ,但 是 无 返回 值 的 函数 能 够 让 CoffeeScript 编 译 副 输出 更 高 效 
率 的 代码 ， 包 含 循环 的 函数 尤其 如 此 。 ) 

(2) 写 一 个 名 为 run 的 函数 , 它 接受 一 个 函数 作为 其 第 一 个 参数 ,然后 把 余下 的 参数 都 传递 给 
被 调用 的 函数 。 也 就 是 说 ，run func,a,b 应 该 相当 于 func(a,b)。 提 示 : 这 不 能 超过 一 行 代码 。 

(3) 隐 式 括号 直到 表达 式 末尾 才 闭 合 ， 但 并 不 一 定 在 行 尾 闭合 。 找 出 一 个 隐 式 括号 没有 到 行 
尾 就 财 合 的 例子 。 

(4) 当 你 使 用 显 式 括号 来 调用 函数 时 , CoffeeScript 不 允许 在 函数 名 称 和 括号 之 间 有 任何 空格 。 
例如 f (a,b) 就 是 一 个 语法 错误 。 你 能 想到 一 条 需要 这 个 规则 的 原因 吗 ? (提示: f(g)h 是 什么 


到 田 
大. 区 

















(5) foo.bar.baz() 洱 数 调用 时 的 上 下 文 是 什么 ? 那 G@hoo() 和 @hoo. rah() 呢 ? 


(6) x 指 癌 的 是 一 个 芝 守 作用 域 规则 的 变量 , 而 @x 指 向 的 一 个 加 村 上 下 文 规则 的 变量 。 这 两 者 
永远 都 不 能 等 同一 一 里 然 它 们 有 可 能 指 癌 同一 个 对 象 ， 但 x=y 对 @x 没 有 有 影 响 ， 反 之 亦 然 。 不 过 
what .Xx 与 Gx 有 可 能 等 价 ， 如 采 它 们 等 价 的 话 ， 那 what 和 是 什么 ? 


找 出 答案 ， 然 后 给 下 面 的 代码 添加 一 行 最 短 的 代码 ， 使 其 输出 quantum entanglement。 
xInContext = -> 
ConsoLe.Log @x 
what = {x: 'guantum entanglement'} 
(7) 下 面 这 段 代 人 码 能 正常 工作 吗 ? 
x = true 
showAnswer = (x = x) -> 
console.log If x then 'It works!' else 'Nope.' 
showAnswer() 


能 或 不 能 ， 为 什么 ? 














集合 与 达 代 





在 上 一 章 中 ， 我 们 苞 握 了 本 数 相关 的 知识 。 现 在 是 时 候 把 函数 应 用 到 数据 集合 上 了 。 

本 董 自 完 以 通用 数据 存储 这 种 新 角度 来 重新 审视 对 象 。 然后 等 习 数 组 , 它 可 以 让 我 们 更 有 序 
地 存储 数据 。 之 后 学 习 迭 代 世 界 的 通用 语言 一 一 循环 。 我 们 还 将 学 习 如 何 使 用 列表 解析 直接 从 
循环 中 生成 数组 ， 以 及 如 何 使 用 模式 匹配 来 提取 数组 的 部 分 内 容 。 最 后 ,我 们 将 完成 上 一 音 开 始 
的 命令 行 版 的 5 x 5 游戏 ， 然 后 用 一 组 新 的 练习 来 回顾 本 革 知 识 。 

















3.1 作为 哈 布 表 的 对 象 


先 复 习 一 下 JavaScript 中 已 知 的 关于 对 象 的 知识 ， 然 后 再 来 看 看 CoffeeScript 提 供 的 语法 增 
织 点 © 


3.1.1 JavaScript 基础 知识 : 一 市 JavaScript 补习 课 

每 种 有 价值 的 语言 都 会 提供 某 种 数据 结构 ,以 便 存 储 任 意 补 命名 的 值 。 不管 怎么 称呼 这 种 结 
构 ， 哈 希 表 、 上 映射 、 字 典 或 者 关联 数组 都 行 ， 其 核心 功能 都 是 一 样 的 : 提供 一 个 键 和 一 个 仁 ， 然 
后 就 可 以 使 用 键 获取 对 应 的 值 。 

在 JavaScript 中 每 个 对 象 都 是 一 个 哈 希 表 , 并 且 几 乎 所 有 东西 都 是 对 象 : 除了 基础 类 型 (布尔 
值 、 数 字 和 字符 串 ) 和 少数 几 个 类 似 于 undefined 和 NaN 的 常量 之 外 。 

最 简单 的 对 象 可 以 这 样 写 : 

obj = new Object() 
或 者 〈 更 为 常用 ) 可 以 使 用 JSON 风 格 的 语法 ?: 

obj = {} 











GD 即 list comprehension， 在 原 书 中 也 叫 array comprehension ( 数组 解析 )， 为 了 延续 Python 、Ruby 等 语言 中 的 使 用 惯 
例 ， 这 里 译 为 列表 解析 。 一 一 译 者 注 
@) 就 是 常 说 的 对 象 字面 量 。 一 一 译 者 注 
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在 JSON 中 ， 对 象 使 用 {} 表 示 ， 数 组 则 用 [] 。 注 意 ，JSON 是 JavaScript 的 一 个 子 集 ， 并 且 通 
第 可 以 直接 将 其 粘贴 到 CoffeeScript 代 码 中 ( 除非 JSON 中 包含 了 会 让 CoffeeScript 编 译 需 误解 的 
缩 进 )。 


但 是 还 有 很 多 其 他 创建 对 象 的 方式 。 实 际 上 ,由 于 所 有 的 函数 都 是 对 象 , 所 以 在 上 一 章 我 们 
已 经 创建 了 大 量 的 对 象 。 


有 两 种 访问 对 象 属性 的 方式 : 点 标记 法 和 方 括 写 标 记 法 。 点 标记 法 比较 简 蛙 :0bj .x 指 的 是 
obj 的 名 为 x 的 属性 。 方 括号 标记 法 则 更 为 通用 一 些 , 在 方 括号 中 的 任何 表达 式 部 会 被 求 值 转化 为 
字符 串 ， 然 后 这 个 字符 串 就 作为 属性 的 名 字 。 因 此 obj['x'] 就 等 同 于 obj .x， 而 obj [x] 指 的 则 
是 一 个 名 字 与 Xx( 转化 为 字符 串 后 ) 的 值 相 匹 配 的 属性 。 


通 当 在 预 完 知 道 属性 的 名 字 时 ， 可 以 使 用 点 标记 法 ， 而 如 果 属 性 名 字 需 要 动态 确定 的 话 ， 就 
要 用 方 括号 标记 法 。 由 于 属性 名 可 以 使 用 任意 字符 串 , 因此 在 某 些 时 候 就 得 使 用 包含 字面 键 名 的 

SymbolLs .+ = 'plus' # illegal syntax 

symbols['+'] = 'plus' # perfectly valid 

我 们 可 以 使 用 SON 风 格 的 结构 一 次 创建 包含 数 个 属性 的 对 象 , 这 就 需要 像 下 面 这 样 使 用 “:” 
把 键 和 值 隔 开 : 


father = { 
name: 'John', 
daughter: { 
name: :JILL 



































二 
son: { 
name: 'Jack' 


} 


My 


注 章 ， 尺 省 在 JavaScript 中 花 括号 用 处 很 多 ,但 在 CoffeeScript 中 花 括 写 的 唯一 用 处 就 是 声明 
对 象 。 

当 键 名 遵循 标准 的 变量 命名 规则 时 , 它 前 后 不 加 引号 也 可 以 ， 否则 就 必须 添加 ， 单 引号 和 双 
| 号 名 可 : 














symbols = { 
“DUS 
': "MinNUS' 
} 


注意 : 在 喻 希 键 名 中 不 文 持 字符 串 搬 值 。 





3.1.2 ”精简 的 JSON 
CoffeeScript 米 用 了 JSON 技 术 晶 吸收 了 它 的 精华 。 虽 然 完整 的 JSON 非 党 有 效 , 但 是 特殊 意义 
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的 空格 能 够 代 蔡 大 部 分 象征 性 的 “符号 ”: 换行 阳 开 的 属性 之 间 的 逗号 可 写 也 可 以 不 写 ， 而 且 最 
棒 的 是 ， 当 对 象 的 属性 之 前 存在 缩 进 时 ， 花 括号 也 是 可 选 的 。 这 也 就 是 说 上 面 的 JSON 可 以 使 用 
相对 更 像 YAML 的 东西 替代 ; 


father = 
name: 'John' 
daughter: 
name: :JILL 
Son : 
name: 'Jack' 


也 可 以 在 单行 代码 中 使 用 这 种 精简 的 记 法 : 

fellowship = wizard: 'Gandalf', hobbits: ['Frodo', 'Pippin', 'Sam'| 
这 上段 代码 与 下 面 这 上 段 等 价 : 

fellowship = {wizard: 'Gandalf', hobbits: ['Frodo', 'Pippin', 'Sam' ]} 

在 这 里 神奇 的 是 ，CoffeeScript 编 详 可 每 次 看 到 :， 就 能 判断 出 你 正在 定义 一 个 对 象 。 这 种 技 
巧 在 函数 接受 哈 希 配置 作为 最 后 一 个 参数 时 尤为 有 用 : 


drawSprite x, y, invert: true 




















3.1.3 同名 键 值 对 


CoffeeScript 提 供 了 一 个 很 有 用 的 技巧 ,在 一 个 键 值 对 中 ， 当 值 是 以 键 命名 的 变量 时 ,可 以 省 
上 略 该 键 值 对 中 的 值 。 例 如 ， 下 面 两 段 代码 是 等 价 的 ， 首 先是 简短 的 写法 : 

delta = '\u0394' 

greekUnicode = {delta} 


这 是 稍稍 长 一 点 的 写法 : 
delta = '\u0394' 
greekUnicode = {delta: delta} 


(注意 ， 简 与 法 只 有 与 显 式 大 括号 一 同 使 用 才 行 ) 我 们 将 在 3.6 广 中 看 到 该 拉 巧 一 种 通 第 的 
用 法 。 























3.1.4 了 豚 收 操作 符 : 'a?.b， 

在 我 们 开始 接触 数组 之 前 , 还 有 最 后 一 个 在 访问 对 象 属性 时 需要 知道 的 CoffeeScript 特 性 : 判 
汤 存在 链 式 操作 符 ， 即 大 家 熟知 的 “吸收 操作 符 ”。 

吸收 操作 符 是 存在 操作 符 的 一 个 特例 ， 我 们 在 2.5 节 接触 过 。 回 忆 一 下 a = b ? c 的 意义 ,“ 如 
条 b 存 在 则 将 其 赋值 给 a， 否 则 将 c 赋 值 给 a”。 但 假设 我 们 想 要 的 是 ， 如 有 果 b 存 在 的 话 就 把 b 的 某 个 
属性 赋值 给 a， 一 种 简单 直接 的 尝试 看 起 来 可 能 是 这 样 : 


a= b.property ? c # bad! 
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哪里 不 对 ? 当代 但 运行 时 , 如 有 果 b 不 存在 我 们 就 会 碰 到 一 个 ReferenceError 的 错误 。 这 是 因 
为 这 段 代 人 码 隐 含 地 假定 b 存 在 ， 只 会 检查 b .property 是 否 存在 。 

有 解决 方法 吗 ? 在 属性 访问 符 之 前 放 一 个 ? 即 可 : 

a=br,property ? ¢c # good 

现在 只 要 b 或 者 b.property 中 有 一 个 不 存在 ,都 会 把 c 赋 值 给 a。 只 要 你 喜欢 , 可 以 链 式 地 使 
用 任意 多 个 吸收 操作 符 , 无 论 是 点 操作 和 从 还 是 方 括 号 操作 符 , 甚至 可 以 用 这 种 语法 在 运行 多数 之 
前 来 检查 函数 是 否 存在 : 

cats?['Garfield']?.eat?() if lasagna? 

我 们 用 一 行 代 码 表达 了 这 样 的 意思 ， 如 采 有 面条 上 且 有 猫 ， 而 且 其 中 有 只 叫 Garfield 的 猫 ， 且 
Garfield 有 一 个 eat 的 函数 方法 ， 束 运行 这 个 方法 。 

很 酷 , 不 是 吗 ? 但 是 有 时 候 军 宙 比 现在 更 有 秩序 。 当 我 想起 有 序 的 事物 时 ,一 种 非常 特殊 的 
对 象 就 浮现 在 我 的 脑海 中 。 




















3.2 ”数组 











尽管 可 以 使 用 之 前 提 到 的 任意 对 和 象 来 保存 有 序 的 值 列表 ,但 数组 ( 它 从 Array 的 原型 中 继承 
了 这 些 属性 ) 提供 了 好 几 个 不 错 的 特性 ”。 

可 以 使 用 SON 风 格 的 语法 来 定义 数组 : 

mcFlys = ['George', 'Lorraine', 'Marty'| 
与 之 等 价 的 代码 如 下 : 

mcFlys = new Array () 

mcFlys[0] Ceorge 

mcFlys[1] 'Lorraine,' 

mcF lys[2] ‘Marty 

别 忘 了 所 有 对 和 象 的 键 都 会 转化 为 字符 串 ， 因 此 arr[1] 、arr['1'] 苏 至 arr[{toString:-> 
'1'}] 的 含义 都 是 一 样 的 。( 当 某 个 对 象 有 一 个 toString 方 法 时 ， 则 在 这 个 对 象 转化 为 字符 串 时 
就 会 用 到 它 的 返回 值 。) 

因为 数组 也 是 对 象 ， 所 以 可 以 目 由 地 为 数组 添加 各 种 各 样 的 属性 ,但 这 并 不 是 第 见 的 做 法 。 
更 为 通用 的 做 法 是 修改 Array 原 型 ， 为 所 有 的 数组 添加 特殊 的 方法 。 例 如 ，Prototype.js 框 架 通 过 
这 种 方式 为 数组 添加 了 flatten 和 each 等 方法 ， 使 它 更 像 Ruby 的 数组 。 








GD http://developer.mozilla.org/en/JavaScript/Reference/Global Objects/Array 


3.2.1 区 间 


打开 REPL， 熟悉 CoffeeScript 区 间 ( 以 及 与 之 密切 相关 的 切 分 (slice ) 和 剪接 (splice ) 语法 ， 
会 在 下 一 市 介绍 ) 的 最 好 方法 就 是 ('practice' for i in [1..3]).join(',，')"。 


CoffeeScript 增 加 了 Ruby 式 语法 ， 用 来 定义 连续 整数 数组 .: 

coffee> [1..5] 

[ 由 F 2 . 3 是 4 是 3 ] 
“..” 用 来 定义 一 个 闭 区 间 (inclusive range ),。 但 通常 我 们 想 省 略 最 后 一 个 值 ， 在 这 种 情况 下 ， 可 
以 添加 一 个 “.,” 生 成 排外 区 间 ( exclusive rage ): 

coffee> [1...5] 

[ a! SF 2 S 3 是 4] 

(为 了 方便 记忆 ， 可 想象 额外 的 “. ”其实 代替 了 最 后 的 什 。) 区 间 也 可 以 是 倒序 的 : 

coffee> [5..1] 

[ S SF 4 F 3 SF 2 Ss 1 ] 


不 管 顺 序 是 正 还 是 反 ， 排 外 区 间 都 会 省 略 末尾 的 值 : 


coffee> [5...1] 
be 4， 3 2] 


通常 并 不 会 单独 使 用 这 种 语法 , 但 是 稍 后 我 们 就 会 看 到 , 它 是 CoffeeScript for 循 环 不 可 或 缺 























3.2.2 ” 切 分 和 和 葛 接 
当 你 想 从 JavaScript 数 组 中 切 出 一 块 的 时 候 ， 需 要 使 用 听 起 来 有 点 儿 暴 力 的 sSLice 方 法 : 


coffee> ['a', 'b', 'c', 'd'].slice 0, 3 

[| 

传 给 sLice 的 两 个 数字 是 索引 值 。 从 第 一 个 索引 开始 到 第 二 个 索引 结束 〈 但 不 包括 第 二 个 过 
引 ) 内 的 所 有 东西 都 复制 到 返回 结果 中 。 你 可 能 一 看 就 会 说 :“ 这 上 听 起 来 有 点 儿 像 排外 区 间 ”。” 
你 说 对 了 : 

coffee> ['a', 'b', 'c', 'd'][0...3] 

[| 
也 可 以 使 用 闭 区 间 : 

coffee> ['a', 'b', 'c', 'd'][0..3] 

人 

这 里 的 规则 较 财 区 间 来 说 稍 有 不 一 样 ， 这 都 是 由 sLice 的 性 质 所 致 。 特 别 地 ， 如 采 第 一 个 家 




















QD “('practice' for i in [1..3]).join(',').” 是 一 个 CoffeeScript 表 达 式 ， 其 值 为 “practice,practice, 
practice”， 即 作者 想 表达 的 意思 就 是 ， 需 要 不 断 地 练习 、 练 习 ， 再 练习 。 译 者 注 
已 半 开 半 闭 区 间 。 一 一 译 者 注 
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引 | 指 癌 的 位 置 在 第 二 个 指 癌 的 位 置 之 后 ， 结 果 就 会 是 一 个 空 数 组 而 不 是 一 个 倒转 的 数组 : 

coffee> ['a', 'b', 'c', 'd'][3...0] 

[] 

而 且 ， 负 数 索 引 会 从 数组 未 尾 往 后 倒数 , 但 arr[-1] 只 是 查找 一 个 arr 中 名 为 -1 的 属性 ， 
而 arr[0.-1] 的 意思 却 是 “把 从 数组 第 一 个 元 又 直到 最 后 一 个 元 又 (但 不 包含 最 后 一 个 元 又 ) 的 
切 分 返回 ”。 换 名 话说 ， 当 切 分 arr 时 ，-1 的 意义 与 arr,.Length-1 相 同 。 


如 果 省 略 第 二 个 索引 ， 则 无 论 使 用 两 个 还 是 三 个 点 ， 都 会 一 直 切 分 到 数组 的 末尾 : 
coffee> ['this', 'that', 'the other'][1..] 
['that', 'the other'] 


coffee> ['this', 'that', 'the other'][1...] 
['that', 'the other'] 


CoffeeScript 还 为 splice ( 用 于 插值 的 slice 的 兄 第 方法 ) 提供 了 一 个 人 简写 法 。 它 看 起 来 就 像 给 
切 分 赋值 : 

coffee> arr = ['a', 'c 

coffee> arr[1...2] = [ 

coffee> arr 

1 :aa Pb | 




















字符 串 的 切 分 
很 奇怪 ，JavaScript 为 字符 串 提供 了 一 个 slice 方 法 , 但 它 的 行为 与 substring 方 法 一 致 。 这 
非常 方便 ， 它 意味 着 可 以 使 用 CoffeeSript 的 切 分 语法 获取 子 字符 囊 : 
coffee> 'The year is 3022'[-4..] 
3022 
然而 ， 别 太 发 散 一 一 虽然 切 分 适用 于 字符 串 ， 但 是 剪接 却 不 行 。 因 为 在 JavaScript 中 字符 
串 一 旦 被 定义 就 永远 不 可 能 修改 了 。 


区 间 即 表示 数组 被 巷 换 的 部 分 。 如 果 该 区 间 为 空 ， 则 会 从 第 一 个 索引 处 开始 直接 插入 值 。 

coffee> arr = ['a', 'c'"] 

coffee> arr[1...1] = ['b'] 

coffee> arr 

orp ae 

有 一 个 不 同 点 需要 注意 : 虽然 负数 索引 在 切 分 时 能 够 表现 完美 ,但 剪接 时 就 完全 不 行 了 。 不 
过 省 略 第 二 个 索引 的 技巧 仍然 适用 : 

coffee> steveAustin = ['regular', 'guy'] 

coffee> replacementParts = ['better', 'stronger', 'faster'] 
coffee> steveAustin[0..] = replacementParts 


coffee> steveAustin 
['better', 'stronger', 'faster'] 
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关于 切 分 和 藤 接 的 内 容 就 这 么 多 。 你 应 该 把 日 己 看 做 使 用 区 间 提 取 和 字符 子 串 和 子 数组 方面 
的 专家 啦 ! 但 在 for..in 博 法 中 ， 区 间 还 有 另外 一 种 更 加 富有 想象 力 的 用 法 ， 下 一 章 我 们 就 会 
看 到 O 〇 








3.3 ”集合 的 迭代 


CoffeeScript 中 内 置 了 两 种 请 法 来 对 集合 进行 运 代 : 对 和 象 达 代 格式 和 数组 迭代 格式 (后 者 也 可 
用 于 其 他 可 枚 举 对 象 ， 但 通常 只 用 于 数组 )。 虽然 两 者 看 起 来 很 像 ， 但 是 它们 的 执行 方式 却 卷 别 
很 大 。 

使 用 下 面 的 博 法 来 迭代 对 象 的 属性 : 


for key, value of object 
# do things with key and value 


该 循环 会 迭代 该 对 和 象 的 所 有 键 名 ， 并 旦 将 其 赋值 给 for 后 面 第 一 个 变量 。 但 是 第 二 个 变量 ， 即 上 
面 名 为 vaLue 的 变量 ， 则 不 是 必需 的 。 正 如 你 期 望 的 那样 ， 它 会 被 典 上 与 键 相 对 应 的 仁 ， 因 此 
value=object[key]。 














'hasOwnProperty' 与 'for own' 
在 JavaScript 中 ， 对 象 “自身 ”的 属性 和 从 原型 继承 的 属性 是 有 差别 的 。 可 以 使 用 object， 
hasownProperty(key) 来 检测 某 个 特定 属性 是 不 是 对 介 “ 自 己 ” 的 。 
因为 人 们 普遍 和 希望 迭代 对 象 自己 的 属性 ,而 不 是 迭代 那些 与 同类 共享 的 属性 , CoffeeScript 
允许 使 用 for own 自动 进行 检查 且 跳 过 那些 没有 通过 检查 的 属性 。 这 里 有 个 例子 : 


for own sword of Kahless 


它 是 下 面 这 段 代 码 的 简写 : 


for Sword of Kahless 
continue unless Kahless.hasOwnProperty (sword ) 


每 当 for...of 给 出 了 你 不 想 要 的 属性 ， 使 用 for own..in 替 换 试 试看 。 
对 于 数组 来 说 ， 语 法 稍稍 有 点 不 一 样 : 


for value in array 
# do things with the value 


为 什么 需要 使 用 不 一 样 的 语法 呢 ? 为 什么 不 直接 使 用 for key，value of array 呢 ?这 是 
因为 数组 可 能 会 有 额外 的 方法 和 数据 。 如 果 你 想 要 它 的 全 部 家 当 ， 那 用 of 没 问 题 。 但 如 果 你 想 
把 数组 单纯 当 作 一 个 数组 ， 那 么 就 使 用 in 一 一 只 会 依次 获得 array[6] 、array[1]…… 直 到 
array[array.Length-1] 为 止 。 
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两 种 风格 的 for 循 环 都 可 以 在 后 面 跟 一 个 when 从 句 ， 当 给 定 的 条 件 为 假 时 ， 就 跳 过 当前 的 和 迭 
代 。 例 如 ， 下 面 的 代码 会 忽略 挥 obj 上 的 非 方法 属性 而 调用 其 他 所 有 的 方法 : 


for key, func of obj when typeof func jis 'function' 
func() 


下 面 这 段 代码 只 有 在 bid 比 较 大 时 才 会 把 其 赋值 给 highestBid: 
highestBid = 0 


for bid of entries when bid > highestBid 
highestBid = bid 


当然 ， 我 们 也 可 以 在 循环 体 开始 部 分 使 用 continue 、untLess 等 条 件 语句 来 蔡 代 when 从 人 句 。 
但 是 when 是 一 个 非 第 有 用 的 语法 糖 , 特别 对 于 那些 痴迷 于 单行 代码 的 人 来 说 尤其 如 此 。 它 同时 也 
是 可 以 阻止 将 任意 值 添加 到 循环 返回 值 数 组 中 的 唯一 方法 ， 我 们 在 3.5 让 会 涉及 这 一 知识 。 


无 作用 域 的 for 
当 写 for x of obj 或 者 for x in arr 时 ， 你 其 实 正 在 给 一 个 当前 作用 域内 名 为 X 的 变量 
赋值 。 和 人 循环 结 束 后 还 可 以 继续 利用 这 些 变量 。 一 个 例子 : 


for name, occupation of murderMysteryCharacters 
break If occupation is 'butler' 
ConsoLe ,Log "#{name} did it/" 


另外 一 个 合子 : 


countdown = [10..0] 
for num in countdown 
break if abortLaunch ( ) 
if num is 0 
console.log 'We have liftoff!' 
else 
console. log "Launch aborted with #{num} seconds left" 


但 缺少 作用 域 也 会 让 你 感到 意外 ， 尤 其 是 在 for 循 环 内 定义 函数 时 。 因 此 在 不 确定 的 情况 
就 用 do 来 捕获 每 个 迭代 内 的 变量 : 


了 


for x in arr 
do (x) -> 
setTimeout (-> console.log x), 0 


我 们 还 会 在 3.9 节 回顾 这 个 问题 。 


for..in 还 文 持 for..of 并 不 文 持 的 补充 修饰 待 by。 比 起 每 次 逐个 值 循环 整个 数组 ( 这 是 默认 
情况 )，by 可 以 让 你 随意 设置 步 值 ”: 


中 即 间隔 值 。 一 一 译 者 注 


decimate = (army) -> 
execute(soldier) for soldier in army by 10 


步 值 并 非 必须 是 整数 ， 分 数值 也 能 与 区 间 正 常 地 协同 工作 : 
animate = (startTime, endTime, framesPerSecond) -> 


for pos in [startTime..endTime] by 1 / framesPer9econd 
addFrame pos 


也 可 以 使 用 一 个 负 步 值 反 过 来 从 区 间 末 尾 开 始 和 迭代 : 


countdown = (max) -> 
console.log x for x in [max..0] by -1 


但 是 要 注意 ， 数 组 并 不 支持 负 步 值 。 当 你 写 for..in[start, .end] 时 ，start 是 第 一 个 迭代 
值 ( 而 end 是 最 后 一 个 迭代 值 ), 只 要 start>end 人 负数 步 值 就 没有 问题 。 但 是 每 当 你 写 for...in arr 
时 ， 第 一 个 迭代 索引 信和 总 是 0， 最 后 一 个 欠 代 索引 是 arr,.Length-1。 因 此 如 有 末 arr.tLength 大 于 
堆 ， 则 负 步 值 会 产生 无 限 循 环 一 一 永远 不 可 能 达到 最 后 一 个 迭代 索引 1 


关于 for..of 和 for..in， 这 是 你 应 该 了 解 的 全 部 内 容 。 记 住 最 重要 的 一 点 ，CoffeeScript 中 的 
of 与 JavaScript 中 的 in 等 价 。 可 以 这 样 想 : 值 在 数组 中 (in )， 而 你 了 解数 组 的 ( of ) 键 。 


of 和 in 作为 运算 符 有 两 种 存在 方式 : key of obj 用 来 检测 obj [key] 是 否 已 被 赋值 ， 而 x in 
arr 则 是 用 来 检测 arr 是 否 存在 某 个 值 等 于 x。 正 如 for..in 循 环 ，in 运 算 符 只 能 用 在 数组 上 (还 包 
括 其 他 可 枚 举 实体 ， 比 如 说 arguments 和 jQuery 对 象 )。 下 面 是 一 个 例子 : 


fruits = ['apple', 'cherry', 'tomato'] 
'tomato' in fruits # true 
germanToEnglish = {ja: 'yes', nein: 'no'} 
'Ja' of germanToEnglish #true 
germanToEnglish['ja'l? 


如 采 你 想 检 测 一 个 非 枚 举 对 和 象 是 否 包含 某 个 特定 值 该 怎么 办 ?我 们 把 这 个 问题 留 到 练习 中 
去 解答 。 
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如 果 你 党 得 for..of 和 for..in 有 点 复杂 ， 别 担心 
这 些 循 环 的 意义 一 目 了 然 : 


makeHay() while sunShines() 








还 有 一 些 更 简单 的 循环 可 用 。 事 实 上 ， 





makeHay() until sunSets() 

你 可 能 已 经 猪 到 了 ，until 就 是 while not 的 简写 ， 就 像 unLess 是 if not 的 简写 一 样 。 

注意 ， 在 这 两 种 句法 中 ， 如 果 条 件 起 初 就 不 满足 的 话 makeHay () 一 次 都 不 会 执行 。 这 与 
JavaScript 中 的 do..whiLe 循 环 不 一 样 ，do..whiLe 至 少 会 执行 一 次 循环 体 。 在 本 章 的 练习 中 我 们 会 
为 此 创建 一 个 工具 函数 。 











dr 
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你 会 在 很 多 语言 中 看 见 while true 和 循环， 即 表示 循环 体会 一 直 执行 直到 它 被 break 或 者 
return 强 制 退出 。CoffeeScript 为 此 提供 了 一 种 简化 的 方式 ， 人 简称 为 Loop: 
Loop 
console.log 'Home' 
break if @flag is true 
console.log 'Sweet' 
@flag = true 
注意 ,| 除了 loop 之 外 ,所 有 循环 语法 允许 同时 使 用 后 级 修饰 从 句 和 缩 进 形式 , 就 像 1f/unless 
那样 。loop 是 独特 的 ， 它 可 以 作为 前 级 但 不 能 做 后 级， 如 下 面 这 样 : 
a=0 
Loop break if ++a > 999 
console.log a # 1000 


尽管 whhile、until 和 Toop 不 像 for 语 句 那 样 通用 ,但 由 于 它们 功能 多 样 ， 你 也 应 该 多 加 利 
用 这 一 重要 的 编程 技巧 。 
接 下 来 ,我们 来 回答 一 个 古老 的 禅宗 公案 : 列表 的 值 究 葛 是 什么 ? 








3.5 列表 解析 


类 似 Scheme 、Hashell 和 OCaml 这 类 隐 数 式 编 程 语言 几乎 不 需要 使 用 循环 。 相 反 ， 可 以 使 用 
映射 、 归 纳 和 精简 "等 运算 来 闪 代 数组 。 很 多 这 类 运算 可 以 通过 类 库 的 方式 引入 JavaScript 中 ， 比 
如 说 Underscore.js 类 库 。 但 要 获得 最 佳 简 洁 性 和 灵活 性 ,一 门 语言 需要 支持 列表 解析 (又 叫 数 
组 解析 )。 

想 想 看 , 每 次 循环 一 个 数组 只 是 为 了 基于 它 创建 一 个 新 的 数组 。 例 如 在 JavaScript 中 ,要 将 一 
个 数字 数组 中 的 所 有 项 部 取 反 和 需要 这 样 写 : 

positiveNumbers 本 2 

negativeNumbers al 

for (i = 0; i < positiveNumbers.length; i++) { 


negativeNumbers.push(-positiveNumbers[i]); 


} 
下 面 是 与 之 等 价 的 使 用 列表 解析 的 CoffeeScript: 
negativeNumbers = (-num for num in [1，2，3，4]) 
还 可 以 对 条 件 循 环 使 用 解析 语法 : 
keysPressed = (char while char = handLeKkeyPress ( ) ) 


看 到 发 生 什 么 事情 了 吗 ? CoffeeScript 中 的 每 个 循环 都 会 返回 一 个 值 。 这 个 值 是 一 个 数组 , 里 




















GD compact 演 算 ， 即 返回 数组 的 一 个 副本 ， 该 副本 删除 了 数组 中 的 非 真 值 。 一 一 译 者 注 
@) http://documentcloud.github.com/underscore/ 
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面 存 放 了 每 次 迭代 的 结 采 (不 包括 被 continue 或 者 break 跳 过 的 迭代 ， 也 不 包括 when 从 人 铝 的 返 
回 值 )。 并 且 这 并 不 只 是 单行 循环 的 专利 : 
| = 
codeKeyValues = for key in code 
switch Key 
when 'L' then 37 


11 Ra OQ 
wnien LI JIO 


U 

when 'R' then 39 
when 'D' then 40 
when 'A' then 65 
when 'B' then 66 


(在 单行 式 中 我 们 需要 使 用 括号 ， 而 这 里 却 不 需要 ， 你 知道 为 什么 吗 ? 还 有 ， 你 也 许 想 知道 
switch 的 作用 ， 到 4.4 节 你 就 清楚 了 。) 
注意 ， 可 以 联合 for 循 环 的 修饰 符 by 和 when 一 起 使 用 列表 解析 : 


evens = (x for x in [2..10] by 2) 


rh mm 








jsInteger = (num) -> num is Math.round(num) 
numsThatDivide960 = (num for num ln [1..960] when isInteger(960 / num)) 


列表 解析 式 是 CoffeeScript 核 心 设计 哲学 的 产物 : CoffeeScript 中 所 有 的 东西 都 是 表达 式 ， 并 
日 每 个 表达 式 有 一 个 值 。 那 循环 的 值 是 什么 ” 目 然 就 是 一 个 包含 迭代 结 采 的 数组 。 

CoffeeScript 的 另外 一 个 设计 哲学 是 DRY: 不 要 做 重复 劳动 ( Don’t Repeat Yourself )。 下 一 市 
将 讲述 一 个 我 最 喜爱 的 DRY 特 性 。 
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eR A dR 可 能 需 写 一 个 目 定 义 
陋 数 。 但 在 CoffeeScript 中 ， 只 需要 写 一 行 代 但 : 

[firstName，middLeInitiaL，LastNamej = ['Joe', 'T', 'Plumber'| 

这 种 语法 叫做 数组 模式 匹配 , 乍 一 看 可 能 比较 奇怪 。 其 实在 赋值 操作 左边 的 方 括号 并 不 会 真 
的 创建 一 个 数组 。 它 只 是 描述 了 一 种 填充 右 侧 数组 的 变量 “模式 ”"。 因 此 下 面 这 行 代码 与 之 前 的 
等 价 : 

firstName = 'Joe'; middlelnitial = '7T'; lastName = 'Plumber' 

但 是 数组 模式 匹配 不 只 是 一 种 便于 多 重 赋值 的 雅 必 语法 ,一 方面 ,可 以 在 赋值 的 左右 两 边 引 
用 同样 的 变量 ， 让 值 的 交换 从 繁琐 的 3 行 代码 变 成 简单 的 1 行 代码 : 

[newBoss, oldBoss] = [oldBoss, newBoss] 
我 们 还 可 以 像 在 函数 定义 中 那样 来 使 用 参数 列 ， 许 见 2.6 三 : 


[theBest, theRest...] = topStudents 
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如 何 你 党 得 数组 醒 式 匹配 很 棒 , 那 你 一 定 会 爱 上 对 和 象 的 模式 匹配 。 假如 要 从 一 个 对 象 中 提取 
几 个 值 : 


{X: myX, y: myY} = myRect 

同样 ,在 赋值 左 侧 的 并 不 是 一 个 真正 的 对 象 ， 它 是 一 个 模式 。 它 为 匹配 这 些 键 提供 了 键 和 变 
量 名 称 。 因 此 下 面 是 与 之 等 价 的 代码 : 

myX = myRect.x; myY = myRect ,y 

这 似乎 并 没有 赚 到 便宜 ， 但 是 还 记得 〈 束 如 我 们 在 3.1.3 市 讨论 的 一 样 ) {x:Xx} 是 怎么 简写 为 
{x} 的 吗 ? 它 们 同样 能 在 模式 里 使 用 。 这 就 意味 着 , 如 有 末 仅 仅 是 想 把 rect.x 和 rect.y 赋 信 给 局 部 
变量 x 和 y， 只 需 这 样 写 : 

{x, y} = rect 

相信 我 ,从 此 刻 开始 这 种 语法 将 改变 你 从 对 和 象 中 取 值 的 方式 。 举 为 外 一 个 例子 , 假设 我 们 正 
在 使 用 Node 的 assert 模 块 写 一 些 测试 。 我 们 特别 想 使 用 assert,ok 和 assert,strictEquaL 方 
法 。 可 以 通过 下 面 的 代码 把 它们 载 人 名 为 ok 和 strictEqual 的 变量 上 : 

{ok, strictEqual} = requijire 'assert' 

最 后 一 条 小 由 士 一 一 我 提 过 数组 模式 匹配 和 对 象 模式 匹配 可 以 互相 藤 套 使 用 了 吗 ? 

{tLanguages: [favoriteLanguage, otherLanguages...]} = resume 
这 段 代 码 翻 译 为 :“ 取 得 resume .languages, 将 它 的 第 一 项 赋 给 favoriteLanguage 变 量 , 将 剩 
余 项 放 到 一 个 新 数组 otherLanguages 中 。” 一 行 代码 搞定 ， 不 错 吧 ? 

模式 匹配 也 称 为 解构 赋值 ， 而 且 它 还 是 JavaScript 1.7 标 准 的 一 部 分 ( 最 新 版 的 Firefox 中 支持 
该 特性 )。 但 无 须 等 标准 普及 开 来 一 一 CoffeeScript 可 以 把 所 有 模式 编译 为 一 系列 相对 简单 的 赋值 
语句 。 

我 知道 本 章 塞 给 你 很 多 知识 , 现在 是 时 候 把 这 些 开 雁 的 知识 聚集 到 一 起 来 完成 拼 字 族 戏 的 第 
一 个 可 用 版 本 了 。 不 要 和 饼 了 完成 之 后 的 练习 一 一 我 敢 保 证 ， 它 挑战 不 小 。 






































3.7 项 目 : 5X5 单 人 游戏 
既然 在 上 一 章 里 我 们 已 经 处 理 了 输入 , 那么 现在 只 需要 再 做 几 件 事 , 我 们 的 程序 就 是 一 个 完 
整 的 游戏 了 。 让 我 们 从 最 简单 的 拼 字 方块 开始 ， 然 后 青 去 处 理 那 些 比较 难 的 部 分 。 


先 做 最 重要 的 : 我 们 需要 一 些 单词 。 邓 好 ， 用 于 Scrabble 比 赛 的 单词 表 〈 即 第 二 版 官方 比赛 
与 俱乐部 单词 表 *, 也 就 是 Scrabbler 铁 杆 玩 家 所 熟知 的 OWL2 ) 是 公开 的 。 本 书 的 示例 代码 中 包含 

















(1) Second Official Tournament and Club Word List。 一 一 译 者 注 
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了 该 单词 表 的 一 个 版 本 "。 

我 们 会 把 该 单词 表 存 储 于 数组 中 。( 其 他 的 数据 结构 ， 比 方 说 二 又 树 ， 可 能 有 更 融 的 查询 
效率 ， 我 把 这 个 优化 工作 留 给 读者 去 完成 。) 但 首先 ， 需 要 通过 Node 的 文件 系统 fs ) 模块 来 
访问 它 : 














Collections/5x5/game.coffee 


fs = require 'fs' 
owl2 = fs.readFileSync 'OWL2.txt', 'utf8' 


readFileSync 和 直接 把 文件 内 容 读 到 一 个 字符 串 中 。Sync 后 缀 意味 着 这 个 浮 数 与 绝 大 多 数 的 
Node.js I/0 也 数 不 一 样 ， 它 会 阻塞 程序 的 执行 ， 直 到 自己 运行 结束 。 如 果 在 读 取 文件 的 同时 ,我 
们 还 要 在 后 台 做 一 些 事情 的 话 ， 就 需要 使 用 带 有 callback 的 readFile 来 替代 ， 以 便 操 作 系 统 在 
后 侣 该 取 文件 的 同时 ， 我 们 的 程序 能 人 够 继续 执行 下 去 。 

词典 的 每 一 行 包 括 一 个 单词 以 及 该 单词 的 定义 和 句子 成 分 ， 例 如 : 


























0D a hypothetical force of natural power [n -9] 3 
我 们 不 会 使 用 这 些 混乱 的 附加 信息 ， 用 一 个 简单 正则 表达 式 来 提取 每 行 中 第 一 个 单词 : 
Collections/5x5/game.coffee 


wordList = owl2.match /人 ^(\w+)/mg 


然后 对 单词 数组 中 的 单词 进行 过 滤 ， 以 便 留 下 来 的 单词 能 够 适应 网 格 的 大 小 : 


Collections/5x5/game.coffee 


wordList = (word for word in wordList when word,Length <= GRID SIZE) 
这 里 的 GRID_SIZE 是 之 前 设置 的 一 个 第 量 , 其 值 为 5。( 当然 , 我 们 也 可 以 调整 正则 表达 式 确 
保 其 只 提取 出 足够 短 的 单词 ， 以 此 来 获得 更 高 的 效率 。) 


现在 定义 一 个 函数 来 检查 给 定 的 捍 词 是 否 有 效 : 





Collections/5x5/game.coffee 


lisWord = (str) -> 
str in wordList 


很 测 单 ， 不 是 吗 ? 回忆 一 下 ，x in arr 表 示 什 x 是 否 在 数组 arr 中 。( 这 与 JavaScript 中 的 in 
不 一 样 ， 在 CoffeeScript 中 与 其 对 应 的 是 of。 ) 

生成 一 个 随机 的 网 格 就 有 点 复杂 了 。 首 先 我 们 需要 一 种 方法 , 它 能 以 准确 的 概率 分 布 随机 地 
产生 单词 : 








GD http:/www.zyzzyva.net/wordlists.shtml 
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Collections/5x5/game. coffee 


# Probabilities are taken from Scrabble, except that there are no blanks., 
# See http://www.hasbro,com/scrabble/en US/faqGeneral.cfm 


tileCounts = 
A ”9B 2 C2 MD A TE 112 OF 2 0G 3 20 LO LK LL 4 
M2 N60 8 Pp 2 QL Re S74 TOU AAV 2 W 27° X |] 
2 

totalTiles = 0 


totalTiles += count for letter, count of tileCounts 


# JavaScript hashes are unordered, so we need to make our own key array: 
alphabet = (letter for Letter of tileCounts).sort() 


randomLetter = -> 
randomNumber = Math.ceil Math ,random() * totalTiles 
X = 1 
for letter in alphabet 
x += tileCounts[letter] 
return letter if x > randomNumber 


现在 使 用 一 个 般 套 的 列表 解析 来 生成 网 格 : 


Collections/5x5/game. coffee 


# grid Is a 2D array: grid[col]j[row], where 0，0 is the uvpper-left corner 
grid = for x in [0...GRID SIZE] 
for y ln [0...GRID SIZE] 
randomLetter() 


我 们 还 想 打 印 出 漂亮 的 网 格 ( 这 是 一 款 拼 字 游 戏 ， 而 不 是 魔域 ”)。 





Collections/5x5/game. coffee 


printorid = -> 
# Transpose the grid so we can draw Fows 
rows = for x in [0...GRID SIZE] 
for y in [0...GRID SIZE] 
grid[y][x] 
rowStrings = (' ' + row.join(' | ') for row In rows) 
rowSeparator = ('-' for i lin [1...GRID SIZE * 4]).join('') 
console.log '\n' + rowStrings.]join("\n#{rowSeparator}\n") + '\n' 


最 后 ， 来 做 记分 模块 。 我 们 将 从 一 个 散 列 表 以 及 一 个 数组 开始 ， 前 者 用 于 存储 Scrabble 中 各 
字母 的 分 值 ， 后 者 用 于 跟踪 用 的 单 癌 : 





中 魔域 (Zork ) 是 第 一 球 文字 冒险 游戏 ， 在 此 类 游戏 软件 中 ， 玩 家 输入 文字 指令 来 控制 角色 ， 游 戏 界面 相对 比较 简 
陋 ， 基 本 上 只 有 文字 输入 输出 的 交互 。 一 一 译 者 注 
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Collections/5x5/game.coffee 


# Each letter has the same point value as In Scrabble. 


tileValues = 
人 有 于 号 ED 
并 
YA4 ZX:~ 0O 


moveCount = 0 
score = 0 
usedWords = [] 


现在 轮 到 真正 的 记分 困 数 了 。 它 接受 一 个 网 格 对 象 和 两 个 被 交换 方 格 的 零 基 坐标 作为 参数 ， 
并 且 依 赖 wordsThroughTiLe 国 数 一 一 该 图 数 会 返回 所 有 经 过 某 个 特定 方 格 的 单词 : 





Collections/5x5/game.coffee 


scoreMove = (grid, swapCoordinates) -> 

{Xl1, x2, yl, y2} = swapCoordinates 

words = wordsThroughTile(grid, xl1, y1).concat wordsThroughTile(grid, x2, y2) 

moveScore = multiplier = 0 

newWords = [] 

for word in words when word not in usedWords and word not in newWords 
multiplier+t+ 
moveScore += tileValues[letter] for letter in word 
newWords ,push word 

usedWords = USsedwords .concat newWords 

moveScore *= multiplier 

{moveScore, newWords} 


wordsThroughTile 隆 数 内 部 有 些 复杂 , 因为 我 们 需要 从 4 个 不 同 的 方 癌 经 过 二 维 数 组 中 的 同 
一 个 点 ， 同 时 还 需要 确保 不 会 越界 。 让 我 们 来 看 一 下 整个 函数 ， 然 后 再 分 开 解 释 : 





Collections/5x5/game.coffee 


wordsThroughTile = (grid, x, y) -> 
strings = [] 
for length in [MIN WORD LENGTH. .GRID SIZE] 
range = length - 1 
addTiles = (func) -> 
strings.push (func(i) for i in [0..rangel).join '' 
for offset in [0...length] 
# Vertical 
if inRange(x - offset, y) and inRange(x - offset + range, y) 
addTiles (i) -> grid[x - offset + il[y] 
# Horizontal 
If inRange(x, y - offset) and inRange(x, y - offset + range) 
addTiles (i) -> grid[xj[y - offset + i] 
# Diagonal (upper-left to lower-right) 


dr 


46 第 3 章 集合 与 迭代 


if inRange(x - offset, y - offset) and 
inRange(x - offset + range, y - offset + range) 
addTiles (i) -> grid[x - offset + il]j[ly - offset + 工 ] 
# Diagonal (lower-left to upper-right) 
if inRange(x - offset, y + offset) and 
inRange(x - offset + range, y + offset - range) 
addTiles (i) -> grid[x - offset + i][y + offset - i] 
str for str in strings when isWord str 


外 层 循环 for Length in [MIN WORD LENGTH. .GRID SIZE] 会 对 所 有 符合 游戏 规则 的 单词 
长 度 (此 处 是 从 2 到 5 ) 进行 迭代 。 定义 addTiles 函 数 , 它 使 用 从 0 到 Length-1 的 每 一 个 整数 值 i， 
来 调用 给 定 的 函数 ,然后 将 该 也 数 所 有 返回 值 ( 是 一 堆 字 符 ) 合 并 为 一 个 字符 串 。 传 递 给 addTiles 
的 参数 其 实 是 这 样 一 个 函数 ; 它 接受 参数 i, 然后 返回 从 开始 点 问 特 定 方向 前 进 i 步 后 的 方 格 中 的 
字母 值 。 

存在 内 层 循环 for offset in [0...Length] 是 因为 我 们 想 获得 经 过 给 定 方 格 的 所 有 单词 ， 
而 不 单单 是 以 它 开头 的 单词 。 举 个 例子 ， 在 垂直 方向 上 ， 当 坐标 为 0 时 ， 我 们 取 从 给 定 方 格 开始 
问 下 的 所 有 单词 ; 当 坐 标 为 1 时 ， 我 们 取 从 给 定 方 格 上 方 的 方 格 开始 癌 下 的 所 有 单词 ， 依 次 加 上 
直到 网 格 的 边缘 。 

说 到 边缘 ，inRange 检 查 末 数 确保 了 备 选 单词 的 两 头 都 在 网 格 内 。 如 果 这 些 检查 都 通过 了 ， 
我 们 就 把 一 个 回调 函数 传递 给 addTiLes, 该 函数 为 其 提供 每 次 欠 代 i 步 后 所 对 应 的 方 格 中 的 字母 
值 ， 然 后 addTiles 把 拼接 出 来 的 备 选单 词 压 人 字符 串 列 表 中 。 能 够 通过 isWord 测 试 的 单词 会 作 
为 函数 的 返回 值 返回 。 

(给 addTiles 传 递 隐 数 可 能 看 起 来 没有 必要 ， 但 它 实际 上 大 大 人 简化 了 wordsThroughTile 耶 
数 。 在 一 个 较 老 版 本 的 代码 中 ， 同 样 的 循环 和 连接 的 代码 重复 了 4 次 ! ) 

哗 ， 现 在 可 以 初始 化 游戏 了 。 我 们 需要 计算 游戏 初始 承 已 经 在 网 格 中 的 单词 ， 可 以 运行 
scoreMove 让 每 个 方 格 与 其 本 身 “交换 ”来 实现 : 









































Collections/5x5/game. coffee 


console.log "Welcome to 5X51 
for x in [0...GRID SIZE] 
for y ln [0...GRID SIZE] 
scoreMove grid, {xl: x, x2: x, yl: y, y2: y} 
unless usedWords.length is 0 
console.log """ 
Tnitially used words: 
#{UuSedWords.join(', ')} 


console.log "Please choose a tile In the form (Xx, y)." 


最 后 ， 把 上 一 草 的 提示 输入 代码 插 进 来 ， 稍 作 修 改 以 便 能 正 笛 工作 : 








3.7 项 目 : 5x5 单 人 游戏 47 


Collections/5x5/game.coffee 


promptForTilel = -> 
printGrid() 
console.log "Please enter coordinates for the first tile." 
ijnputCallback = (Input) -> 


try 

{x, y} = strioCoordinates input 
catch e 

console.log e 

return 


promptForTile2 x, y 


Collections/5x5/game.coffee 


promptForTile2 = (xl1l, yl1) -> 
console.log "Please enter coordinates for the second tile,." 
jnputCallback = (Input) -> 


try 

{XxX: x2, y: y2} = strioCoordinates input 
catch e 

console.log e 

return 


If xl is x2 and yl is y2 
console.log "The second tile must be different from the first,." 


else 
"MANACN Ta TA "OWaDDinho /fTv1 P| hh /fv TO 1 
LUIIDULC， LUY IOWGNVHLIIIY (NAATLS), 六 YiS/ with (7 人 2) YZ21/. 
Xl1--; XxX2--; yl--; y2--; # convert 1-based indices to 0- pa 


[grid[x1i][ly1], grid[x2][y2]] = [grid[x2][y2], grid[x1l][y1]] 
{moveScore, newWords} = scoreMove grid, {xl, yl, x2, y2} 
unless moveScore is 0 
console.log """ 
You formed the following word(s): 
#{nNnewWords.join(', ')} 


SCOre += move9core 


moveCount++ 
console.log "Your Score after #{moveCount} moves: #{score}" 
promptForTilel() 


完工 ! 运行 游戏 ( coffee game.coffee )， 得 到 的 结果 如 图 4 所 示 。 


当然 , 这 个 程序 还 远 远 称 不 上 完美 。 从 前 并 来 看 ， 它 的 交互 界面 是 不 是 有 点 过 于 古典 了 ? 从 
编程 的 角度 上 看， 代码 也 非常 混乱 。 下 一 章 我 们 将 把 重心 放 在 后 一 个 问题 上 ， 然 后 使 用 jQuery 把 
简陋 的 命令 行 游戏 变 成 一 个 基于 浏览 融 的 用 户 体 验 更 佳 的 游戏 。 最 后 , 使 用 Node 服 务 融 端 程序 为 
其 添加 多 人 游戏 功能 
CoffeeScript 最 好 的 地 方 就 是 可 以 在 所 有 这 些 场景 中 重用 代码 ,不 省 你 的 游戏 是 运行 在 浏览 妖 
































PUYYy 
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咽 还 是 服务 带 并 , 计算 每 次 移动 得 分 的 代码 总 是 一 样 的 。 客 户 端 和 服务 硕 问 的 一 致 性 能 有 各 种 各 
样 的 实际 应 用 一 一 表单 验证 就 是 其 中 之 一 。 此 外 ,通过 对 对 和 象 和 循环 的 全 面 了 解 ， 你 已 经 开始 精 
通 CoffeeScript 了 。 








大 全 Terminal 一 env 一 80x24 
1 因 有 四 
Please enter coordinates for the tirst tile. 
号 ,了 
Please enter coordinates for the second tile., 
5,1 
Swapping (4, 1) with (Ss5, 1),..,.， 
You tormed the following wordtls}): 
DR, RAI, RAIA, OAK 


Your score atter 5 moves: 162 


LIEIS|IAIN 
村 计 上 江 守 上 下 


Please enter coordinates tor the tirst tile. 3 
i 





图 4 ”命令 行 提示 版 试 玩 


3.8 进 阶 


完成 下 面 的 练习 之 后 ， 你 就 可 以 把 自己 称 作 黄 带 CoffeeScripter 了 。 如 何 拿 到 黑 带 ?7 答案 就 是 
模块 化 、 分 块 封装。 尽管 CoffeeScript 表 达能 力 强大 , 但 一 些 程 序 还 是 要 写 很 多 代码 。 比 起 几 个 让 
人 尝 头 转向 的 大 文件 ， 使 用 多 个 有 明确 功能 定义 的 小 文件 会 更 好 。 











3.9 练习 


(1) 使 用 slice 复 制 整 个 数组 是 一 个 比较 通用 的 方法 : 
coffee> original = ['Mary', 'Poppins'] 

coffee> copy = original[0..] 

coffee> copy[0] = 'Sh' + copy[0][1..] 
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coffee> copy[1] = 'B' + copy[1][1..] 
coffee> original .join ' ' 
Mary Poppins 
coffee> copy.join ' ' 
Shary Boppins 
请 解释 下 copy=orginal[0..] 与 copy=orginal 有 什么 不 同 。 
(2) 下 面 这 段 代 码 说 明了 CoffeeSript 的 for..in 与 C 语 言 风格 的 for 循 环 的 一 点 微妙 区 别 。 请 解 
释 为 什么 这 段 代 但 产 生 了 下 面 的 结 采 : 
once = -> 
If once.hasRun 
nuLL 
eLse 
once.hasRun = true 
[1, 2,; 3] 
console.log x for x in once() 


1 
2 
3 


(3) 下 面 这 段 代码 的 运行 结 采 是 什么 ? 


for x In [1, 2] 
setTimeout (-> console.log x), 50 


附加 题 : 超时 时 间 为 0 有 关系 吗 ? 

参见 6.3 节 中 的 “循环 中 的 作用 域 ” 可 获得 提示 。 

(4) 回想 下 'foo' in arr， 它 可 以 告诉 你 数组 arr 中 是 否 包 含 字符 串 'foo' , 还 有 “bar” of obj 
可 以 告诉 你 obj .bar 是 否 存在 。 但 如 何 检查 一 个 任意 的 对 象 是 否 包 含 某 个 特定 的 值 呢 ? 可 以 这 样 
开始 : 

objContalns = (0bj，VvaL) -> 

(5) 假设 我 们 想 要 一 个 函数 ， 它 至 少 运行 一 次 ， 然 后 继续 重复 运行 直到 满足 某 个 条 件 终 上 上 。 
在 C、Java 和 JavaScript 中 ， 我 们 可 以 这 样 写 : 


do 1 
user.harangue() 
} while (!user.paidInFULL ) 


直接 与 之 等 价 的 CoffeeScript: 


user.harangue() 
user.harangue() until user.paidInFull 


但 是 这 违反 了 神圣 的 DRY (不 要 重复 自己 ) 原则 ， 请 定义 一 个 doAndRepeatUntitL 国 数 ， 接 
受 两 个 果 数 (等 价 于 循环 体 和 循环 条 件 )， 以 便 我 们 用 如 下 方式 重 写 之 : 


doAndRepeatUntil user.harangue, -> User.paidInFULL 
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(6) 在 本 章 的 游戏 项 目 中 ， 我 们 把 MIN WORD LENGTH 设 为 了 一 个 常量 。 然 而 ， 从 模块 化 的 角 
度 来 看 ， 从 加 载 到 游戏 中 的 字典 获取 该 值 会 更 合理 。 如 何 结合 Math .min.apply 和 列表 解析 使 用 
一 行 代码 来 实现 这 个 方案 ? ( Math .min 会 返回 参数 中 的 最 小 值 , 例如 Math.min15，16，23，42， 
5，8 的 返回 值 是 5。) 





模块 与 类 





在 之 前 的 几 章 中 , 我 们 学 习 了 如 何 使 用 CoffeeScript 的 动词 和 名 词 来 造句 ,但 是 一 个 优雅 的 程 
序 并 不 单 是 堆砌 各 种 句 型 , 我 们 还 需要 更 局 层次 的 抽象 , 尤其 是 需要 一 种 明晰 地 描述 对 象 类 型 的 
Ds 

在 典型 的 面 呵 对 象 编 程 语言 中 ， 比 如 C++， 对 象 和 类 是 有 明显 差别 的 对象 是 类 的 实例 ， 
它 从 类 继承 方法 却 存 储 目 己 的 数据 。 而 很 多 动态 语言 ， 比 方 说 Ruby， 则 允许 在 运行 时 修改 对 象 
的 方法 ， 对 象 和 类 的 区 别 则 不 会 太 大 。 但 到 了 JavaScript， 这 种 差别 束 根 本 不 存在 了 : JavaScript 
没有 类 ， 只 有 便于 对 象 间 共享 方法 的 原型 。 因 此 ，JavaScript 和 常常 被 说 成 是 一 种 基于 原型 的 编程 
培 言 。 

虽然 这 种 实现 共 至 的 动态 方法 很 强大 , 但 却 有 损 代 人 码 的 可 读 性 。 如 果 你 正在 阅读 那些 严格 其 
于 类 的 语言 的 源码 , 且 想 找 出 某 个 特定 对 象 上 文 持 哪些 方法 ， 只 需 查 看 用 来 定义 该 对 象 的 类 的 代 
但 就 行 了 。 但 如 果 想 知道 一 个 JavaScript 对 象 都 有 哪些 方法 ( 在 不 运行 代码 的 情况 下 )， 你 就 必须 
在 整个 程序 中 追踪 每 个 可 能 的 该 对 象 的 引用 或 者 其 原型 的 引用 。 


这 几 年 诞生 了 几 种 模式 , 它们 可 以 把 JavaScript 代 码 以 某 种 跟 类 较为 相像 的 方式 组 织 起 来 , 而 
后 逐渐 形成 了 一 种 标准 的 模式 。CoffeeScript 中 class 关 键 字 即 根 源 于 此 。 在 本 章 中 ， 我们 将 学 习 
CoffeeScript 中 的 类 的 工作 原理 ， 然 后 用 它 来 将 5 x 5 游戏 代码 模块 化 。 


不 过 ， 在 学 习 CoffeeScript 类 之 前 ， 需 要 先 谈 一 下 CoffeeScript 中 模块 之 间 是 如 何 交 互 的 。 









































4.1 模块 : 解构 程序 


在 浏览 硕 环境 中 , JavaScript 与 文件 无 关 , 无 论 有 多 少 个 文件 , 它们 都 只 是 一 连 串 的 代码 而 已 。 
因此 , 如 有 果 在 同一 个 程序 中 有 两 个 文件 恰好 创建 了 同名 的 全 局 变量 ,那么 它们 将 不 得 不 干 上 一 架 ， 
或 许 最 好 的 代码 会 顾 。 

对 于 复杂 的 JavaScript 程 序 来 说 这 是 一 个 严重 的 问题 。 如果 一 个 小 组 拆 分 了 一 个 项 目 , 他 们 如 
何 防 止 覆 盖 彼 此 的 变量 ? 如 何 确保 下 载 的 开源 代码 不 会 与 目 己 的 代码 发 生 冲 突 呢 ? 
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用 命名 空间 即 可 解决 。 在 JavaScript 中 ( 当然 在 CoffeeScript 中 也 一 样 )， 每 个 因数 都 有 目 己 的 
命名 空间 ， 每 个 在 函数 中 定义 的 变量 在 函数 外 不 可 见 。 因 此 ， 有 一 种 常见 JavaScript 编 程 风格 ， 即 
用 一 个 即时 执行 的 函数 把 每 个 文件 包 里 起 来 使 其 形成 模块 。 像 Node.js 这 样 的 服务 絮 端 环境 ( 它 实 
现 了 CommonJS 标 准 ”)， 只 会 把 每 个 文件 当做 单独 的 模块 来 看 。 


就 如 1.3.1 闻 “ 包 庄 中 的 JavaScript ”专题 所 讲 ，CoffeeScript 编 译 需 会 把 所 有 的 .coffee 文 件 都 包 
里 在 一 个 匿名 的 孔 数 中 , 除非 它 在 编译 时 使 用 了 - -bare 参 数 。 由 于 在 JavaScript 中 很 容易 漏 掉 var 
关键 字 , 所 以 CoffeeScript 还 会 避免 你 错误 地 声明 全 局 变量 。 但 问题 在 于 , 模块 间 该 如 何 共 享 数 据 
的 呢 ? 

答案 就 是 把 共享 的 数据 附加 到 一 个 已 存在 的 全 局 变量 上 。 一 种 选择 是 使 用 根 对 象 , 它 是 唯一 
一 个 能 目 由 访问 其 属性 的 对 象 。 在 浏览 硕 环 境 中 根 对 象 是 window， 在 Node 中 是 gLobal。 

事实 上 ， 所 有 你 习以为常 的 全 局 对 象 剖 是 根 对 和 象 的 属性 。 例 如 ，parseInt 实 际 上 是 
window.parseInt/global.parseInt，Math 实 际 上 是 window.Math/global.Math。 就 达 定 义 
内 置 类 型 的 对 象 ， 如 String， 实 际 上 也 是 window.String/global.String。 

在 JavaScript 中 ， 给 根 对 象 添加 属性 很 浴 单 一 一 事实 上 ， 当 你 无 意 之 间 省 略 了 关键 字 var 的 时 
候 ， 就 已 经 给 root 添 加 了 属性 。 但 相反 ，CoffeeScript 中 就 需要 明确 定义 : 


root = global ? window 



































# filel,coffee 
root .emergencyNumber = 911 


# file2.coffee 

console.log emergencyNumber # '911' 

emergencyNumber is root.emergencyNumber # true 

第 一 行 代 码 定义 了 root 变 量 ,， 如 果 global 存 在 则 赋值 为 global， 否则 为 window， 以 此 来 保 
证 同时 兼容 Node 和 浏览 器 环境 。 

Node 还 有 为 外 一 个 特殊 的 对 象 exports。 通 常 ， 它 比 global (更 多 信息 见 6.2 节 ) 更 常用 。 
上 面 的 例子 使 用 了 global ? window， 而 没有 用 exports ? window， 这 样 代码 在 任何 环境 中 看 
起 来 才 都 一 样 。 男 一 种 选择 是 使 用 一 个 类 库 ， 比 如 说 RequireJS”， 它 允许 你 以 同样 的 方式 在 各 种 
环境 中 构建 模块 化 代码 ， 而 无 需 使 用 像 gLobaL 和 window 这 类 默认 情况 下 到 处 可 用 的 对 象 。 

当然 ,把 任何 小 东西 都 放 到 全 局 命名 空间 上 也 并 不 是 什么 好 的 做 法 。 相 反 , 将 变量 打包 到 一 
个 清晰 的 引用 对 象 会 更 加 合理 。 下 面 是 一 个 例子 : 























CO CommonJS 是 一 组 服务 需 端 JavaScript 标 准 , 此 项 目 在 早期 的 ServerJS 工 作成 果 基 础 上 发 展 而 来 , 则 在 为 Web 服 务 右 、 
桌面 应 用 和 命令 行 应 用 创建 完整 的 JavaScript 生 态 系 统 。 一 一 译 者 注 
@) http://requirejs.org/ 
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root = global ? window 

root ,httpCodes = 
movedPermanently: 301 
pageNotFound : 404 
serverError: 2500 


一 旦 这 个 模块 执行 ， 其 他 模块 就 可 以 引用 其 中 的 变量 了 ， 比 如 httpCodes .pageNotFound。 








4.2 ”原型 的 威力 
介绍 类 之 前 一 宇 要 先 理解 原型 的 工作 原理 理 。 悉 JavaScript 的 读者 把 本 市 当成 一 次 复习 即 可 。 


原型 其 实 就 是 一 种 对 象 , 由 原型 衍生 出 的 所 有 对 象 都 能 共享 原型 的 属性 。 一 个 对 象 的 原型 通 
常 可 以 通过 所 谓 的 prototype 属 性 来 访问 ， 当 然 也 有 例外 ”。 

然而 ， 不 能 直接 写 A.prototype = B。 而 应 该 使 用 new 关 键 字 ， 它 会 接受 一 个 constructor 
函数 ， 然 后 新 建 一 个 继承 该 构造 函数 的 原型 的 对 象 。 下 面 是 一 个 简短 的 例子 : 











Boy = -> # by convention, constructor names are capitalized 
Boy::sing = -> console,.log "Tt ain't easy being a boy named Sue" 
sue = new Boy () 

Sue ,Sing () 


这 里 ，Boy: :sing 是 Boy.prototype,sing 的 简写 。 人 符号: :之 于 prototype 束 人像 @ 之 于 this。 


EE es 星 和 隐 式 声 明 
0 用 root 对 象 就 能 又 得 全 局 变量 ， 但 不 能 以 同样 的 方式 为 它们 赋值 。 这 是 一 个 
非常 容易 犯 的 错误 : 


root = global ? window 


# filel.coffee 
root.dogName = 'Fido' 
dogName is root.dogName # true 


# file2,coffee 

console,.log dogName # undefined 
dogName = 'Bingo' 

dogName is root.dogName # false 


为 什么 第 二 个 文件 开头 ,没有 定义 dogName 呢 ?这 是 因为 随后 就 给 一 个 同名 的 变量 赋 了 
值 。 0 这 是 一 个 新 的 变量 声明 ， 而且 所 有 的 变量 声明 都 会 自动 移动 到 作用 域 
的 最 顶端 。 

因此 记 住 : 为 一 个 全 局 变量 赋值 时 一 定 要 通过 root 对 和 象 ， 形 如 X=y 的 语句 永 远 无 法 改变 其 
他 模块 中 的 x。 


GD http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/ 
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输出 如 下 : 
It ain't easy being a boy named Sue 
这 是 sue 继 承 Boy .prototype 属 性 的 结果 。 超 酷 ! 但 它 是 如 何 运 作 的 呢 ? 


当 我 们 使 用 new 时 ， 发 生 了 几 件 事情 : 创建 出 一 个 新 对 象 ， 它 从 构造 函数 那里 获得 了 原型 ， 
然后 再 以 新 对 和 象 作为 上 下 文 执行 构造 函数 体 。 因此, 假设 我 们 想 要 每 个 新 对 象 都 能 够 保存 目 己 的 
名 字 ， 并 且 能 够 输出 当前 的 礼物 个 数 : 

Gift = (Gname) -> 


Gift,.count++ 
@day = Gift.count 


A 











Gift.count = 0 
Gift::announce = -> 
console.log "On day #{@day} of Christmas I received #{@Name}" 


gift1l = new Gift('a partridge In a pear tree') 
gift2 = new Gift('two turtle doves') 


这 是 输出 结 来 : 
On day 1 of Christmas I received a partridge in a pear tree 
On day 2 of Christmas I received two turtle doves 


原型 、 优 先 级 和 has0OwnProperty 
如 果 一 个 对 象 从 一 个 原型 中 继承 了 属性 ， 那 么 修改 原型 也 就 会 修改 对 和 象 上 继承 的 属性 : 


Classes/Raven.coffee 


Raven = -> 

Raven: :quoth = -> console.log 'Nevermore,' 
ravenl] = new Raven() 

ravenl .quoth() # Nevermore 


Raven: :quoth = -> console.log "I'm hungry" 
ravenl .quoth() # I'm hungry 


直接 赋值 给 对 象 的 属性 优先 于 原型 上 的 属性 。 因 此 可 以 这 样 消除 歧义 : 


Classes/Raven.coffee 
raven2 = new Raven() 


raven2.gquoth = -> console.log "I'm my Own kind of raven" 
raven1.quoth ( ) # I'm hungry 
raven2.gquoth() # I'm my own kind of raven 


要 确定 一 个 属性 是 直接 赋值 给 对 彰 还 是 从 原型 继承 而 来 ， 可 以 使 用 has0wnProperty 函 数 : 


Classes/Raven.coffee 


console.log ravenl.hasOwnProperty('guoth') # false 
console. log raven2.hasOwnProperty('guoth') # true 
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每 次 构造 图 数 Gift 执 行 时 ， 它 都 会 做 4 件 事 情 : 把 传人 的 名 称 赋 值 给 aname ( 使 用 属性 参 
数 的 简写 法 ), 为 构造 函数 6ift 的 count 属 性 加 1, 把 count 的 值 复制 到 eday， 然 后 运行 从 原型 
继承 来 的 Gannounce 图 数 。 值 得 注意 的 一 点 是 ， 新 对 象 的 所 有 图 数 都 是 以 目 身 作为 上 下 文 而 执 
行 的 。 

这 都 没什么 问题 , 但 是 不 是 稍微 有 点 混乱 ? 是 不 是 应 该 有 某 种 比较 清晰 的 方式 ,以 区 别 构造 
函数 属性 ( 比如 Gift.acount ) 和 原型 属性 ( 比如 Gift::announce ), 以 及 构造 函数 和 普通 函数 。 
咽 ， 实 际 上 有 。 














4.3 类: 原型 函数 


CoffeeScript 的 类 定义 语法 与 对 象 的 定义 语法 很 像 。 这 并 不 是 巧合 , 定义 一 个 类 其 实 就 是 定义 
一 个 对 象 。 确切 地 来 说 ,你 定义 的 是 一 个 原型 。 如 果 你 定义 了 constructor 卫 数 ， 那 它 是 唯一 不 
属于 原型 的 类 属性 。 


让 我 们 看 一 个 例子 ， 阐 明 一 个 众所周知 的 事实 : 单个 毛 球 族 * 制 造 的 麻烦 与 全 部 毛 球 族 的 数 
量 成 正比 : 


Classes/Tribble. coffee 


class Tribble 
constructor: -> 
GisAlive = true 
Tribble.count++ 
# Prototype properties 
breed: -> new Tribble If @isAlive 
die: -> 
Tribble.count-- if QisALive 
GisAlive = false 


# Class-level properties 
GQCcount : 0 
GmakeTrouble: -> console.log ('Trouble!' for i in [0..@count]).join(' ') 


这 里 有 很 多 新 语法 ， 让 我 们 依次 讨论 。 
每 次 新 建 一 个 毛 球 族 ，Trible.count 就 加 1 (在 这 里 可 以 将 其 写作 @count， 因 为 在 类 内 部 
的 this 值 就 是 类 本 吴 )。 调 用 TribtLe,makeTroubtLe() 时 ， 它 会 输出 TribLe,count 次 


“Trouble! 。 











OQ) 毛 球 族 (tribble ) 出 自 一 部 名 为 《星际 旅行 : 原初 》 的 科幻 电 视 系 列 剧 第 二 季 最 受 欢 迎 的 一 集 《 毛 球 族 的 麻烦 》 
(the Trouble with Tribbles )。 一 一 译 者 注 
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测试 一 下 : 


Classes/Tribble. coffee 


tribblel = new Tribble 
tribble2 = new Tribble 
Tribble.makeTrouble() # "Trouble! Troubler" 


注意 , 在 Tribble 类 的 上 下 文中 可 以 用 @count 来 访问 Tribble.count, 但 在 Tribble 的 方法 
中 却 不 可 以 。 和 在 一 看 可 能 会 有 点 更 名 其 妙 ， 但 别 忘 记 我 们 涉及 3 个 对 象 : Tribble 对 象 本 时 ( 实 
际 上 就 是 contructor 辆 数 )、Tribble.prototype 和 Tribble 类 的 实例 。 默 认 情 况 下 ，Tribble 
类 的 属性 (除了 contructor ) 都 会 附加 到 原型 上 。 当 使 用 @ 前 级 时 ， 就 明确 表示 我 们 想 把 该 属性 
添加 到 类 对 象 本 身上 去 "。 

因为 添加 到 原型 上 的 函数 (包括 构造 函数 ) 都 是 以 各 目的 对 象 作 为 上 下 文 被 调用 的 , 在 这 些 
哨 数 中 有 @ 前 级 的 变量 指 癌 的 都 是 实例 属性 。 这 就 是 我 们 之 所 以 会 在 构造 函数 中 定义 @isAlive 的 
原因 : 我 们 需要 为 每 个 实例 添加 各 自 的 @isAlive 属 性 。 可 以 这 样 做 : 














Classes/Tribble. coffee 


tribblel.diel() 
Tribble.makeTrouble() # "Troubler!" 


由 于 有 if @isAlive 的 检查 ， 再 次 杀 死 tribble1l 就 没什么 影响 了 。 而 且 众 所 周知 ， 毛 球 族 
是 胎生 的 ， 因 此 要 不 了 多 久 就 会 有 新 的 生物 住 到 我 们 的 程序 中 





Classes/Tribble. coffee 


tribble2.breed().breed().breed!() 
TribblLe ,makeTroubLe ( ) # "Trouble! Trouble! Trouble! Trouble!" 


4.4 使 用 extends 来 继承 


到 目前 为 止 ， 我们 已 经 介绍 了 原型 是 如 何 轻 松 地 让 大 量 对 象 共 至 彼此 的 功能 ， 以 及 
CoffeeScript 的 类 是 怎样 提供 一 个 有 用 的 二 法 来 将 原型 属性 绑 定 到 一 起 的 ,如 果 这 就 是 类 的 全 部 功 
能 ， 那 它 似 乎 也 没 多 大 用 人 处。 用 到 继承 时 类 的 优势 才 凸 显 出 来 。 

JavaScript 通 过 “原型 链 ” 来 实现 继承 。 假 设 ，A 的 原型 是 B，B 又 有 目 己 的 原型 C。 然 后 我 们 
号 了 这 样 的 代码 : 

a = new A 

console.log a.flurb() 


首先 ， 运 行 时 查看 这 个 特殊 的 类 A 的 实例 a 上 是 否 有 一 个 flurb 的 属性 ， 如 果 没 有 则 查看 A 的 
原型 B; 如果 还 是 没 找到 ， 则 继续 查看 B 的 原型 C。 简 而 言 之 ， 它 会 遍历 整个 原型 链 。 








QD 即 类 属性 ( 类 的 静态 变量 )。 一 一 译 者 注 
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如 果 C 上 也 没有 flurb 会 怎么 样 ? 那 运 行 时 就 会 检查 默认 对 和 象 的 原型 ( 即 们 的 原型 )。 也 就 是 
说 ， 每 个 对 象 其 实 都 继承 了 {} 的 原型 ,但 之 间 可 能 会 包含 其 他 原型 。 


所 有 这 些 把 原型 给 原型 再 给 原型 的 赋值 会 变 得 有 些 混乱 。 这 就 是 CoffeeScript 中 需要 extends 
的 原因 。 


声明 如 下 : 

class B extends A 

然后 B 的 原型 就 继承 目 A 的 原型 , 另外 还 把 A 的 类 属性 复制 给 了 B。 因此 如 采 我 们 现在 不 再 继续 
定义 B，B 的 实例 将 有 和 A 实 例 完 全 一 样 的 行为 。( 有 一 个 例外 ，B.name 是 'B ' 而 Aname 是 'A' 一 一 
name 是 一 个 特殊 的 属性 。) 

让 我 们 来 看 一 个 稍微 深入 点 的 例子 : 

class Pet 


constructor: -> @isHungry = true 
eat: -> @isHungry = false 























class Dog extends Pet 
eat: -> 
console.log '*crunch, crunch*' 
super ( ) 
fetch: -> 
console.log 'Yip yip!' 
@isHungry = true 
Dog 继 承 了 Pet 的 构造 函数 ,这 意味 着 狗 开 始 饿 了 。 当 小 狗 吃 东 西 时 ,， 它 会 发 出 一 些 声 音 然后 
调用 super() ,super() 的 意思 是 “调用 父 类 同名 的 方法 ”( 精确 地 说 就 是 Pet: :eat ,call this )。 
然后 这 只 独 承 不 狐 了 。 


如 果 在 子 类 上 定义 了 一 个 构造 函数 ， 那 它 会 履 盖 父 类 的 构造 函数 。 不 过 它 随时 都 可 以 用 
super() 来 调用 父 类 的 构造 函数 。 在 子 类 构造 函数 开始 时 就 调用 super() (更 常用 的 是 super， 
参见 “super 不 是 super()” 专 题 ) 通常 是 明知 之 举 。 


想象 不 到 吧 ? 关于 类 ， 你 已 经 知道 了 所 有 需要 了 解 的 内 容 。 由 于 这 些 东西 都 是 基于 
CoffeeScript 的 ， 所 以 语法 可 能 与 JavaScript 有 较 大 差别 ， 但 是 编译 后 的 代码 简单 另 介 。 如 采 你 是 
一 个 传统 OOP ( 面 癌 对 象 编程 ) 方法 论 的 卫 道 士 ， 那 下 面 的 内 容 为 你 而 设 。 


























多 人 态 与 类 型 转换 
类 的 一 大 应 用 就 是 多 态 。 多 人 态 是 一 个 面 品 对 和 象 编程 的 融 级 术语 一 一 “一 个 东西 可 变 成 很 多 不 





同 的 东西 ， 但 不 是 任何 东西 。 下 面 是 一 个 典型 的 例子 : 


class Shape 
constructor: (Gwidth) -> 
computeArea: -> throw new Error('I am an abstract class!') 
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class Square extends Shape 
computeArea: -> Math.pow @width, 2 


class Circle extends Shape 
radius: -> Gwidth / 2 
computeArea: -> Math.PI * Math.pow Gradius(), 2 
showArea = (shape) -> 
unless shape instanceof Shape 
throw new Error('showArea regquires a Shape instance!') 
console.log shape.computeArea!() 


showArea new Square(2) #4 
showArea new Circle(2) # pi 





注意 到 机 数 showArea 会 检查 传人 的 对 象 是 否 是 一 个 Shape 的 实例 (使 用 instanceof 关 键 


字 )， 但 它 并 不 关心 给 它 的 是 何 种 形状 (Shape )。S$quare 或 者 Circte 实 例 都 行 。 尽 管 这 只 是 一 
小 示例 ， 但 不 难 想 象 ， 采 用 此 种 方法 的 功能 丰 宣 的 几何 图 形 库 。 


dy 


super 不 是 super() 
下 面 的 代码 有 什么 问题 ? 
class Appliance 


constructor: (warranty) -> 
warrantyDb.save(this) If warranty 


class Toaster extends Appliance 
constructor: (warranty) -> 
super() 


| 建 一 个 新 的 Toaster 时 , super() 没 有 照样 传递 warranty 参 数 而 是 直接 调用 父 类 的 构 
这 意味 着 新 的 烤 面 包机 (toaster ) 并 不 会 存储 到 质保 ( warranty ) 数据 库 中 。 


我 们 可 以 使 用 Super(warranty) 来 解决 这 个 问题 ,同时 也 可 以 用 另 一 种 简写 方式 : Super。 
没有 括号 也 没有 参数 的 Super 会 传递 当前 函数 的 所 有 参数 。Ruby 程 序 员 对 此 比较 熟悉 。 如 果 不 
是 Ruby 程 序 员 , 那 你 就 把 Super 想象 为 一 个 非常 非常 贫 禁 的 关键 字 吧 一 一 如 果 没 有 告诉 它 你 想 
传递 哪些 参数 ， 它 会 传递 所 有 的 参数 。 


? 


造 函 数 





如 果 不 使 用 instanceof 检 查 ,， 这 就 会 变 成 著名 的 “鸭子 类 型 ”( 意思 是 “如 果 它 看 起 来 像 一 
只 觅 子 ……… ”0 )。 就 算 目 标 对 象 没 有 computeArea 方 法 ， 我 们 总 能 得 到 一 条 有 意义 的 错误 信息 。 
虽然 鸭子 类 型 很 好 ， 但 有 时 候 需 要 确定 特定 对 象 是 否 有 如 预期 。 








在 更 加 经 上 典 的 面向 对 象 语言 中 ， 有 一 种 结合 switch 使 用 多 态 的 惯用 语法 。 我 们 还 没有 讨论 
过 CoffeeScript 中 的 switch， 它 与 JavaScript 中 的 switch 有 几 点 不 同 : 首先 ， 它 在 每 个 分 句 之 间 都 








四 
赣 
es 
名 
CE 田 
谎 


:“ 当 看 到 一 只 鸟 走 起 来 像 秽 子 , 游 起 来 像 网 子 , 叫 起 来 也 像 芍 子 , 那么 这 只 鸟 就 可 以 被 称 为 鸭子 。 
一 一 译 者 注 
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有 隐 式 的 打 断 (break ) "“， 以 防止 意外 的 “落空 ”( fallthrough ) >; 其 次 ，switch 的 运行 结果 会 
被 用 作 它 的 返回 值 。( 使 用 该 返回 值 时 ， 就 不 能 使 用 break 或 return 语 句 。 如 果 你 非 要 这 样 试 试 
看 ， 会 得 到 Syntax-Error: cannot include a pure statement in an expression 销 误 。 用 行 话 来 说 就 是 ， 


a=return x 没 有 意义 ， 因 此 编译 需 不 允许 存在 这 种 可 能 性 。) 


CoffeeScript 还 做 了 一 些 语法 上 的 改变 ， 这 在 某 种 程度 上 提醒 了 JavaScript 程 序 员 注意 那些 隐 
藏 的 差异 : 使 用 when 代 替 了 case，etLse 代 替 了 defauLt ( 关键 字 借 鉴 了 Ruby， 在 Ruby 中 case 结 
构 语 义 相 似 )。 单 个 when 后 面 可 以 跟 几 个 潜在 的 匹配 ( match )， 匹 配 之 间 用 逗号 隔 开 。 同 样 ， 作 
为 :的 替代 ， 也 可 以 使 用 缩 进 (或 者 then ) 把 匹配 分 句 与 它们 产生 的 结果 隔 开 。 


下 面 是 如 何 把 它们 合并 到 一 个 工矿 枉 数 中 去 的 示例 : 
requisitionStarship = (captain) -> 
switch captain 
when 'Kirk', 'Picard', 'Archer' 
new Enterprise!() 
when 'Janeway' 











new Voyager() 
else 
throw new Error('Invalid starship captain') 


关于 模块 和 类 我 们 就 讨论 这 些 。 只 要 记 住 ， CoffeeScript 绝 不 会 要 求 你 必须 使 用 类 或 者 使 用 经 
典 的 面 回 对 象 的 设计 模式 一 一 华东, 不 使 用 它们 ,大 多 数 JavaScript 工 程 师 也 能 干 得 很 出 色 。 但 是 
对 于 某 些 程序 来 说 ， 类 就 显得 尤为 适合 。 

说 到 这 里 ， 还 记得 上 一 章程 序 中 混乱 的 代码 吗 ? 来 看 看 我 们 能 对 它们 做 点 什么 吧 。 











4.5 项目: 重 构 5X5 游戏 


类 编程 提倡 模块 化 和 可 扩展 性 , 它 为 我 们 重 构 当前 的 代码 提供 了 一 种 简单 的 方式 。 让 我 们 创 
建 3 个 类 . 

(1) Dictionary， 用 于 查找 网 格 中 合法 的 单词 ; 

(2) Grid， 管 理 字母 方 格 ; 

(3) PLayer， 记 录 玩 家 的 分 数 。 

把 这 3 个 类 分 别 保存 到 3 个 不 同 的 .coffee 文 件 中 。 同时 , 确保 这 些 类 不 但 能 够 运行 在 Node.js 上 ， 
而 且 还 能 兼容 所 有 主流 浏览 胡 ， 以 此 来 为 下 一 曹 的 jQuery 版 游戏 打 好 基础 。 为 了 游戏 能 在 Node 
上 上 运行， 使 用 一 个 名 为 console.coffee 的 文件 提供 一 个 输入 模块 ， 并 引入 这 3 个 类 。 











Q 即 break 语 句 。 一 一 译 者 注 
@) 即 在 JavaScript 的 Switch 语句 中 ， 上 一 个 case 中 无 break 语 句 ， 会 继续 执行 下 一 个 case 中 的 语句 ， 不 管 是 和 否 匹 配 
该 case。 译 者 注 








60 第 4 章 ”模块 与 类 


4.5.1 Dictionary 类 


因为 我 们 需要 支持 浏览 大 , 所 以 有 必要 将 文本 文件 中 的 单词 列表 转化 为 JavaScript 代 人 码 , 以 便 
能 直接 加 载 它 。 我 写 了 一 小 段 代 码 ， 正 好 能 做 到 这 些 





CLasses/5x5/convert . coffee 


fs = require 'fs' 

owl2 = fs.readFileSync 'OWL2.txt', 'utf8' 

wordList = owl2.match /人 ^(\w+)/mg 

fileContents = """ 
root = typeof exports === "Undefined" ? window : exports; 
root.OWL2 = ['#{wordList.join "',\n'"}'] 


fs.writeFile 'OWL2.7s', fileContents 

这 里 的 三 重 双 引号 "" "语句 ，Python 程 序 员 应 该 比较 熟悉 ， 它 被 称 作 定 界 字符 事 ， 人 允许 你 用 
高 度 可 读 的 格式 来 书写 多 行 字符 串 。 也 可 以 使 用 三 重 单 引号 ''' 来 定义 一 个 定 界 字符 串 。""" 和 
之 间 的 区 别 与 "和 "之 间 的 一 样 : 前 者 能 够 使 用 字符 串 插 值 ， 后 者 则 不 能 。 


运行 这 段 脚本 ， 生 成 的 OWL2.js 看 起 来 如 下 : 
root = typeof exports === "undefined" ? window : exports; 
root .OwWL2 = ['AA', 








1 700GEOGRAPHICAL ' | 
(简洁 起 见 ， 我 省 略 掉 了 中 间 的 178 687 行 代码 。 ) 


现在 , 为 了 让 Dictionary 与 Node 解 而, 让 我 们 把 单词 列表 和 游戏 的 网 格 传递 给 Dictionary 
的 构造 滑 数 : 


Classes/5x5/Dictionary.coffee 


class Dictionary 
constructor: (GoriginalWordList, grid) -> 
@setGrid grid If grid? 


注意 第 一 个 参数 被 隐 式 地 赋值 给 了 @originalWordList (我 们 已 在 2.4 方 讨论 过 该 特性 )。 


新 游戏 开始 时 传人 一 个 新 的 网 格 ， 并 调用 setGrid。 这 个 网 格 的 大 小 可 能 会 有 变化 ， 因 此 每 次 我 
们 都 会 复制 和 过 滤 原 始 的 单词 列表 ( slice( ta tn 改组 的 技巧 )。 





Classes/5x5/Dictionary.coffee 


setorid: (@grid) -> 
GwordList = @originalWordList.slice(0) 


(QQwamral i1ct+ = (word for word 1n GQwordL ist when word . Length <= Qarid.,sizel) 
vi WA de 了 EJ! = WA Ad] 


GminWordLength = Math.min.apply Math, (w.length for w in @wordList 
Qusedwords = [] 
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for x in [0...@grid.sizel 
for y in [0...GQgrid.size] 
GmarkuUsed word for word in GwordsThroughTiLe x, y 


注意 ， 在 这 里 我 们 还 重 置 了 usedwords。 我 们 还 需要 一 种 方法 来 指明 某 个 单词 是 否 已 被 使 
用 过 : 


CLasses/5x5/Dictionary.coffee 


markUsed: (str) -> 
If str In @usedWords 
false 
else 
GQusedwords .push str 
true 


让 我 再 提供 两 个 函数 ,一 个 用 来 判断 条 个 字符 串 是 否 是 合法 的 单词 ,为 一 个 则 判断 在 当前 的 
游戏 中 该 单词 是 否 可 用 : 














CLasses/5x5/D1ictionary.coffee 


jsWord: (str) -> str in GwordList 
isNewWord: (str) -> str In GwordList and str not in QusedWwords 


接 下 的 部 分 比较 难 : 给 定 一 对 坐标 , 希望 找到 所 有 经 过 这 个 Grid 实 例 方 格 的 单词 。 既然 基本 
上 与 上 一 章 我 们 写 的 wordsThroughTile 也 数 一 样 ， 因 此 可 以 直接 将 其 精 贴 过 来 。 


现在 ， 为 了 能 够 访问 这 个 类 ， 让 我 们 把 它 变 成 全 局 变量 : 


Classes/5x5/Dictionary.coffee 4 
root = exports ? window 


root .Dictionary = Dictionary 











4.5.2 Grid 类 





在 定义 Grid 类 之 前 ， 先 放 其 他 几 个 变量 到 grid.coffee 中 ， 以 使 它们 拥有 模块 级 的 作用 域 : 


Classes/5x5/Grid. coffee 


tileCounts = 
人 天 日 2 2 DAE 2 2 Om 4 
M2 Ns 6 0 8, PP 2 0 1 RO S04 Tl: ow Ur A V2 WW 2 XxX 1 
Yr 2 ZZ. 1] 


totalTiles = 0 
totalTiles += count for letter, count of tileCounts 
alphabet = (letter for Letter of tileCounts).sort() 


randomLetter = -> 
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randomNumber = Math.ceil Math.random() * totalTiles 
X = 1 
for Letter in alphabet 

x += tileCounts[letter] 

return letter if x > randomNumber 


在 实例 化 网 格 时 ， 我 们 需要 让 它 的 初始 tiles 和 矩阵 能 够 日 动 生成 : 


Classes/5x5/Grid.coffee 


class Grid 
constructor: -> 
@size = size = 5 
@tiles = for x ln [0...sizel 
for y ln [0...sizel 
randomLetter() 


现在 我 们 要 定义 几 个 简单 的 函数 ,这些 函数 可 以 检查 一 个 坐标 (x,y) 是 否 超 出 函 围 ， 并 交换 
两 个 方 格 ( 给 定 一 个 包含 两 对 坐标 值 的 对 象 )， 而 且 能 够 得 到 一 个 方 格 交换 后 的 网 格 〈 一 个 行 效 
组 而 不 是 一 个 列 数组 )。 


Classes/5x5/Grid.coffee 
jnRange: (x, y) -> 

0 <= x < @size and 0 <= y < @size 
swap: ({xl, yl, x2, y2}) -> 

[@tiles[x1][y1], @tiles[x2][y2]] = [@tiles[x2][y2], @tiles[x1][y1]] 
rows: -> 

for x in [0...@sizel 

for y in [0...@sizel 
Gtiles[y]l][x] 


类 全 局 化 的 两 行 代码 就 交 给 你 了 。 


4.5.3 Player 类 








每 个 Player 实 例 应 该 有 自己 的 名 字 以 及 一 个 初始 化 网 格 ( 它 并 不 是 每 个 Player 实 例 必须 要 
有 的 )。( 和 pictionary 一 样 ， 当 一 个 新 游戏 开始 时 ， 我 们 就 调用 setGrid 函 数 。) 自然 每 个 玩家 
开始 的 分 数 应 当 为 0， 


CLasses/5x5/PLayer.coffee 


class Player 
constructor: (@Gname, dictionary) -> 
@setDictionary dictionary if dictionary? 


setDictionary: (@dictionary) -> 
Gscore = 0 
GmoveCount = 0 


4.6 就 如 “一 勺 糖 ` 03 


为 玩家 提供 移动 的 方法 : 


Classes/5x5/Player.coffee 


makeMove: (swapCoordinates) -> 
@dictionary.grid.swap swapCoordinates 
GmoveCount++ 
result = ScoreMove @dictionary, swapCoordinates 
@score += result.moveScore 
result 


4.5.4 ”Console.Coffee 接口 


上 一 章 ee 与 命令 行 IO 有 关 的 代码 一 一 现 
在 都 在 console.coffee 中 了 。 我 不 想 在 这 里 重 述 这 些 复 用 的 代码 ,但 比较 重要 的 部 分 是 最 前 面 
的 这 4 行 : 














Classes/5x5/console. coffee 


{Dictionary} = requijire ',/Dictionary' 
{Grid} = require ',./Grid' 

{Player} = require './Player' 

{OWL2} = require ',/OWL2' 


位 于 每 个 文件 名 之 前 的 ./ 前 缀 能 让 Node 从 当前 目录 加 载 该 文件 。 还 有 另外 一 种 方法 〈 该 方法 
已 被 添加 到 Node 0.4 中 )， 可 以 在 consotLe, coffee 所 在 的 工作 目录 下 新 建 一 个 名 为 node modules 
的 目录 ， 然 后 把 这 些 文件 放 到 里 面 "。 这 样 就 不 需要 任何 前 级 了 


已 经 搞定 了 1! 你 来 自己 试 一 下 吧 : 
$ coffee console.coffee 
Welcome to SxS5! 


我 们 已 经 把 杂乱 的 老 代码 重 构成 了 4 个 清晰 漂亮 的 模块 , 其 中 的 3 个 模块 , 我 们 将 在 接 下 来 的 
两 章 中 重用 它们 ,先是 在 浏览 郁 中 重用 ， 然 后 是 在 服务 融 端 。 把 可 复 用 的 游戏 逻辑 代码 从 命令 行 
的 代码 中 分 离 出 来 ， 为 我 们 自己 省 去 了 大 量 的 工作 。 至 于 与 命令 行 相关 的 代码 ，( 松 一 口气 ) 我 
们 再 也 不 会 提 及 了 。 继 续 前 进 吧 ! 








4.6 就 如 “一 久 糖 
在 本 章 中 , 我 们 学 习 了 CoffeeScript 文 持 模块 化 编程 的 两 种 方式 : 首先 , 除了 明确 输出 的 变量 








GD http:/nodejs.org/docs/v0.4.8/apimodules.html。 
Oa eer he of Sugar 是 著名 影片 Mary Poppins(《 欢乐 满 人 间 》) 中 的 一 首 歌 。 其 作者 Robert Bernard Sherman 在 创作 
歌曲 时 ， 从 上 自己 生病 的 孩子 中 获得 灵感 ， 遂 创作 了 这 首 原名 为 4 Spoonful of Sugar Helps the Medicine Go Down 
. 车 名 歌曲 。 本 书 作者 在 这 里 意 指 CoffeeScript 提 供 的 CLass 特 性 ， 让 开发 者 能 够 愉快 地 使 用 设计 优秀 但 运用 难度 
很 大 的 JavaScript 原 型 特性 。 一 一 译 者 注 
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之 外 ， 每 个 文件 (“模块”) 之 间 彼 此 是 隔离 开 的 ; 其 次 是 可 以 把 少数 和 数据 组 合成 类 。 








我 们 同时 用 两 种 方式 来 修整 上 一 章 的 快餐 版 $ x 5 游戏 。 结果 呢 ?” 代 码 不 但 可 读 性 更 强 了 , 而 
日 重 构 难度 大 为 降低 ， 这 和 我 们 在 下 一 章 中 (我 们 把 基于 文本 的 老 版 程序 转换 为 一 个 新 奇 的 Web 
程序 ) 会 看 到 的 一 样 。 另外， 我 们 还 将 从 JavaScript 的 好 伙伴 jQuery 那里 借助 一 些 力量 来 完成 此 事 。 





4.7 练习 
(1) 对 输出 结果 作出 解释 ， 修 改 代码 使 原先 的 格言 能 够 显示 两 次 : 


root = global ? window 


root.aphorism = 'Fool me 8 or more times, shame on me' 


do restoreOldAphorism = -> 
aphorism = 'Fool me once, shame on YOU 
console.log aphorism 
console.log aphorism 


Fool me once, shame on you 
Fool me 8 or more times, shame on me 











(2) 众所周知 ， 精 灵 工 人 国际 联盟 组 织 " 托 管 着 所 有 精灵 仅 有 的 3 个 愿望 ， 
强制 实施 该 规则 而 设计 的 ， 但 是 有 一 点 瑕 疫 : 

Genie = -> 

Genie: :wishesLeft = 3 


Genie: :grantWish = -> 
If @wishesLeft > 0 
console.log 'Your wish Is granted!' 
G@wishesLeft-- 


该 段 代码 的 问题 在 哪里 ， 如 何 修 改 ? 





下 面 的 代码 是 为 了 


(3) 遗 憾 的 是 , prototype 属 性 并 不 是 一 个 对 象 “ 真 正 ” 的 原型 , 但 对 好 , 可 以 通过 proto __ 
取得 真实 的 原型 ， 不 过 并 非 所 有 的 JS 环境 都 文 持 _proto_ ，Internet Explorer 就 不 支持 。 


然而 , 拿 proto 来 前 明 有 关 原 型 继承 的 规则 还 是 非常 有 将 的 : 
class Season 


class Spring extends Season 


(new Season). proto . proto 
(new Spring). proto . proto . proto 





在 一 个 支持 它 的 环境 中 ( 例如 Node )， 这 里 所 示 的 两 个 原型 属性 值 是 什么 ? 





(4) 我 们 并 没有 讨论 过 关于 在 类 上 进行 羡 数 绑 定 的 内 容 ， 因 此 ， 有 必要 给 一 个 范例 。 你 认为 


下 面 这 上段 代码 会 产生 什么 样 的 结果 ? 





J 这 是 作者 为 了 举例 需要 虚构 出 来 的 一 个 组 织 ， 实 际 并 不 存在 。 一 一 译 者 注 


4.7 


(window ? global).property = 'global context' 


@property = 'surrounding context' 
class Foo 
constructor: -> @property = 'instance context' 


bar: => console.log @property 


foo = new Foo 
bar = foo.bar 
foo.bar() 
bar() 


为 什么 开发 者 更 愿意 使 用 -> 来 定义 bar 方 法 ? 





练习 


05 








jQuery Web 交 互 开 发 


曾几何时 , 程序 员 还 未 受到 举重 框 织 的 著 绊 ， 他 们 使 用 纯粹 的 JavaScript 来 编写 Web 程序 。 敢 
于 冒险 的 人 们 漫步 于 这 乒 沃 土 之 上 ，, 为 目 己 的 程序 设计 出 种 种 令 人 兴 香 的 功能 。 但 并 非 一 切 都 能 
尽 如 人 意 ,， 因 为 这 些 精 力 充 沛 的 骑士 们 所 进行 的 每 一 次 大 胆 的 壮举 ， 都 不 得 不 (至 少 ) 重复 两 次 
才 行 : 一 次 在 Netscape (包括 由 它 衍生 出 来 的 开源 浏览 右 ) 中 ， 一 次 在 Internet Explorer 中 。 

为 了 摆脱 这 种 额外 的 负担 , 程序 员 们 就 开始 写 一 些 国 数 ， 以 避 倪 写 重 复 的 代码 。 这 些 冰 数 变 
得 越 来 越 多 ， 越 来 越 复 淋 ， 最终 补 合并 到 由 数 和 干 行 代码 构 成 的 类 库 中 。 很 快 它 们 就 形成 了 不 同 的 
派系 ，MooTools、Prototype、Dojo 和 YUI 就 是 其 中 的 几 个 。 

但 在 几 年 之 后 ,有 一 个 类 库 变 得 非常 流行 ， 几 乎 成 为 事实 上 的 标准 ， 它 就 是 jQuery "。jQuery 
最 初 是 在 2006 年 由 时 年 22 岁 的 John Resig 发 布 的 。 现 在 ， 在 访问 量 排名 前 一 万 的 网 站 中 有 将 近 三 
分 之 一 的 网 站 正在 使 用 jQuery2 ， 而 John Resig 也 成 为 世界 上 最 著名 的 程序 员 之 一 。 最 近 ， 包 括 
jQuery Mobile 在 内 的 一 些 衍生 品 已 经 让 大 家 熟知 的 jQuery 语法 远 远 超出 了 桌面 Web 的 应 用 范畴 。 
尽管 其 他 类 库 仍然 被 广泛 地 使 用 ， 但 jQuery 确实 是 一 枝 独 秀 。 

在 本 章 中 ， 我 们 将 学 习 使 用 jQuery 处 理 网 页 元 了 紊 和 啊 应 事件 的 基础 知识 。( 如 果 你 熟悉 
JavaScript 中 的 jQuery， 那么 这 就 只 是 一 次 温习 ,不 同 的 是 只 需 对 语法 稍 加 调整 。) 在 本 章 的 最 后 ， 
我 们 将 运用 这 些 新 学 的 超 能 力 ， 把 精巧 的 拼 字 游戏 变 为 一 个 丰满 的 、 基 于 浏览 带 的 程序 。 












































5.1 jQuery 之 道 





每 个 JavaScript 类 库 都 有 自己 独特 的 设计 理念 。jQuery 的 理念 在 于 使 JavaScript 变 得 更 加 自然 
( CoffeeScipt 也 是 这 样 )。 

jQuery 不 会 修改 JavaScript 的 内 置 对 象 的 原型 ,比如 String 和 Array 等 。 这 是 jQuery 与 Prototype 
最 根本 的 区 别 ， 后 者 是 流行 度 仪 次 于 jQuery 的 JavaScript 类 库 。Prototype 的 功能 也 很 令 人 吃惊 , 但 


GD http://jquery.com/ 
@) http://trends.builtwith.com/javascript/JQuery 
(3) http://jquerymobile.com/ 
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是 使 用 它 就 意味 着 有 可 能 会 破坏 任何 不 基于 Prototype 编 写 的 代码 ,例如 ,一 个 类 库 可 能 会 使 用 for 
x of arr 来 迭代 一 个 数组 ， 但 不 会 考虑 到 其 中 还 包含 了 Prototype.js 给 Array .prototype 添 加 的 
属性 。( 这 也 是 迭代 数组 应 该 优先 考虑 使 用 for. .in 而 不 是 for..of 的 部 分 原因 。 这 种 情况 下 for 
own...of 同 样 可 用 ， 因 为 它 会 忽略 没有 通过 has0wnProperty 检 查 的 属性 。) 


而 jQuery 的 超 能 力 则 都 被 安全 地 隐藏 到 一 个 对 象 上 : jQuery 对 象 , 通常 使 用 $ 作 为 它 的 别名 。 
整 本 书 中 我 们 都 将 使 用 $ 别 名 ， 但 要 注意 ， 可 以 禁用 它 ， 以 防 其 他 类 库 使 用 同样 的 变量 名 ”。 

可 以 使 用 jQuery 对 象 做 任何 事情 ， 从 过 渡 动 画 到 添加 事件 回调 函数 ， 青 到 从 服务 妖 妆 提取 数 
据 。 而 且 这 还 无 需 使 用 成 千 上 万 可 用 的 插件 *"。 当 然 ， 因 篇 幅 有 限 ， 本 章 及 下 一 章 无 法 详尽 备至 
地 介绍 jQuery， 但 这 些 介绍 足以 使 谈 者 能 够 在 钻研 jQuery 时 避免 一 些 常 见 错误 。jQuery 所 有 特性 
已 经 被 精心 地 记录 在 http:/api.jquery.com/ 上 了 了。 





























5.2 操作 DOM 


如 果 熟 悉 网 页 中 原生 的 JavaScript, 那 你 应 该 知道 可 以 用 像 <p> 之 类 的 HTML 标 签 来 定义 DOM 
元 素 ， 而 使 用 JavaScript 代 码 则 可 以 从 雪 开 始 创建 、 读 取 和 修改 这 些 元 素 。 

jQuery 使 用 上 自己 的 对 象 包 装 这 些 元 素 ， 比 起 直接 使 用 这 些 元 素来 ， 通 过 这 些 包 装 对 象 能 获 
得 更 多 便捷 的 功能 (以 及 更 好 的 蜂 浏 览 硕 一 致 性 )。 要 获取 jQuery 对 和 象 通 常 需 要 使 用 选择 
需 一 一 一 个 传递 给 jQuery 对 象 ”的 字符 串 。 我 们 将 在 5.3 节 学 习 更 多 与 选择 器 相关 的 知识 。 目 前 
你 只 需要 知道 ， 它 们 是 CSS 的 一 个 超 集 。 因 此 ， 要 选择 一 个 ID 为 pikachu 的 元 素 并 且 想 把 选择 
结 东 放 在 名 为 $pokemon《〈 在 jQuery 对 象 挤 加 $ 前 绥 是 一 种 约定 俗 成 的 格式 规范 ) 的 jQuery 对 象 
中 ， 可 以 这 样 写 : 

$pokemon = $('#pikachu') 

- 旦 获得 了 一 个 jQuery 对 象 ， 你 就 掌控 了 一 家 巨大 的 国 数 兵工厂 。 一 般 说 来 ， 这 些 方法 适用 

于 所 有 的 匹配 对 象 。 因 此 ， 如 末 有 两 个 段落 ， 并 且 添 加 了 如 下 的 代码 ， 则 这 两 个 段落 都 将 淡出 : 

$('p').fadeOut!() 

但 “getter” 类 函数 则 是 例外 ,它们 只 作用 于 第 一 个 匹配 的 对 和 象 (一 个 众所周知 的 例外 是 text， 
它 会 把 所 有 匹配 元 素 的 文本 字段 合并 到 一 个 字符 串 中 ) 看 下 面 这 行 代码 : 

sonnet = $('p').html() 

它 只 会 返回 文档 中 第 一 个 段落 的 HTML 内 容 。 与 此 相反 , “setter” 类 哺 数 则 会 作用 于 所 有 匹 
配 的 对 象 。 它 们 往往 有 看 相同 的 函数 名 ， 例 如 : 





























GD http://api.jquery.com/jQuery.noConflict/ 

@) http://plugins.jquery.com/ 

(3) 原文 中 使 用 “jQuery object” 同 时 指 代 了 两 种 不 同 的 对 象 : 一 种 是 jQuery 对 象 本 身 ， 另 外 一 种 是 调用 jQuery 选择 
需 生 成 的 包装 着 DOM 元 素 的 自 定 义 jQuery 对 象 ， 译 者 在 这 里 不 作 区 分 ， 请 读者 明 辨 。 一 一 译 者 注 














68 ”第 5$ 章 jQuery Web 交互 开发 

sonnet = $('p').html() 

$('p').html sonnet 

这 上段 代码 首先 谈 取 第 一 个 段落 的 HTML， 然后 把 它 赋值 给 所 有 匹配 段落 的 HTML ( text 谈 取 
顺 不 但 会 过 滤 反 所 有 的 HIML 标 签 , 还 会 把 所 有 匹配 元 素 的 内 容 连 接 到 一 起 。 当 需要 提取 内 容 时 ， 
请 仔细 思考 text 和 htmt 谁 更 适合 " )。 当 然 这 两 行 代码 可 以 浓缩 为 如 下 所 示 的 单行 代码 ， 不 过 会 
稍 显 上 汐 : 

$('p').html $('p').html() 

这 段 故 事 的 言 外 之 意 是 : 我 们 可 以 用 jQuery 和 CoffeeScript 写 出 优雅 易 读 的 代码 
只 能 去 写 可 运行 的 ASCII 码 图 了 ”。 能 力 越 大 ， 职 责 就 越 大 。 








否则 你 束 











5.3 ”学 会 选择 


把 一 个 字符 串 传 给 jQuery 时 ， 它 会 被 当做 一 个 选择 器 处 理 ， 然 后 会 返回 一 个 包含 了 匹配 元 系 
的 对 象 。 选 择 全 的 语法 模仿 且 扩 展 卫 CSS 选择 各 的 语法 ,单独 的 一 个 HTML 类 型 标签 ( 比如 说 'p') 
会 匹配 该 类 标签 的 所 有 元 系 。 前 面 有 # 的 标识 符 是 一 个 ID ， 而 前 面 有 .的 是 一 个 类 各。 








那些 DOM 元 素 都 哪里 去 了 ? 

你 创建 的 每 一 个 jQuery 对 象 都 是 有 序 的 DOM 元 素 列表 ， 它 被 一 个 统一 的 、 功 能 丰富 的 外 
充 包 误 着。 要 从 中 获取 这 些 元 素 ， 官 方 文档 推荐 使 用 get 方 法 : 

pikachu = $('#pikachu') .get(0) 

但 是 jQuery 对 次 有 个 不 可 告 人 的 小 秘密 ， 就 是 它们 使 用 数值 的 索引 来 存储 DOM 元 杀 ， 以 
此 支持 类 数组 式 的 访问 : 

pikachu = $('#pikachu' )[0] 

我 们 甚至 可 以 使 用 像 Length 和 SsLice 这 样 的 数组 函数 (但 是 不 能 用 push 或 者 concat 一 一 
不 过 可 用 add 来 代替 )。 

当然 ， 除 非 你 清楚 自己 正在 和 干什么， 否则 应 该 尽量 避免 直接 使 用 DOM 元 素 。 否 则 ， 有 可 
能 代码 会 通过 Firefox DOM 测 试 ， 却 在 IE7 中 挂 掉 。 





可 以 列 出 多 个 选择 絮 ， 使 用 去 号 分 隅 ， 对 其 中 的 每 一 个 进行 匹配 。 例 如 ，$('a，button,， 
.link') 将 匹配 全 部 的 a 元 素 、button 元 素 和 有 tink 类 的 元 素 。 可 以 使 用 $('a').add 











(QD) http://stackoverflow.com/questions/1910794/jquery-text-vs-html 
Q 指使 用 ASCII 字 符 来 表达 图 片 的 方式 。 可 运行 码 图 即 用 来 表达 图 片 的 这 些 字符 可 以 构成 一 个 完整 的 可 运行 的 程序 。 
但 这 类 程序 代码 可 读 性 非常 低 。 一 一 译 者 注 
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($('button' )).add($(' .link')) 选 取 同 样 的 元 又 集合 。 


使 用 空格 连接 在 一 起 的 多 个 选择 需 会 进行 子 节 点 匹配 。 例 如 ，$('#header img') 匹 配 所 有 
img 标 签 ,这 些 标签 都 包含 在 古 为 header 的 元 素 中 。 链 式 地 调用 find 方 法 也 可 以 作出 等 价 的 选择 : 
$( '#header') .find('img')。 如 果 你 只 想得到 header 的 直接 子 节 点 ， 既 可 以 用 CSS2 语 法 的 
$(##header > img')， 也 可 以 使 用 调用 链 $('#header').children('img')。 


除了 这 些 CSS 选 择 需 之 外 , jQuery 还 添加 了 一 些 特殊 的 修饰 语 。 例如, 可 以 使 用 $('tr:odd') 
来 单纯 匹配 表格 的 所 有 奇数 行 。 要 匹配 只 包含 链接 的 列表 项 ， 可 以 用 $('Li:has(a)')。 匹 配 所 
有 选中 的 复 选 框 则 只 需 简 单 的 使 用 $(' :checked ' ) 即 可 。 

在 使 用 jQuery 选择 元 素 时 有 两 个 要 点 特别 需要 记 住 。 首 先 ， 选 择 只 会 执行 一 次 一 一 选择 需 不 
是 “ 活 ” 的 〈 不 过 ， 名 副 其 实 的 Live 方 法 和 与 之 功能 类 似 的 deLegate 函 数 则 是 例外 ， 每 当 有 事 
件 触发 时 ， 它 们 都 会 视 需 要 运行 给 定 的 选择 套 )。 其 次 ， 在 jQuery 中 单个 元 系 和 元 系 集合 之 间 没 
有 区 别 ， 一 个 元 素 怠 是 一 个 大 小 为 1 的 集合 。 举 个 例 于 ， 如 采 页 面 上 的 第 一 个 div 的 id 为 header， 
则 $('#header')、$('div:first') 和 $('div').first() 是 完全 等 价 的 。 

尝 头 转 回 了 吧 ? 别 紧张 ! 重要 的 是 记 住 一 个 基本 概念 : 你 给 $ 函 数 传递 一 个 字符 串 ， 它 会 给 
你 返回 一 组 元 素 。 我 们 还 会 在 后 面 的 练习 中 介绍 一 些 选择 天 技 巧 。http:/api.jquery.comycategory/ 
selectors/ 上 列 出 了 jQuery 文 持 的 完整 的 选择 天 字符 串 列 表 。 
































5.4 响应 事件 


我 们 已 经 看 到 ， 通 过 jQuery， 获 取 、 更 改元 系 甚 至 把 新 元 素 添 加 到 页 面 中 都 变 得 非常 简单 。 
但 在 jQuery 最 核心 的 部 分 ， 还 有 一 个 惊人 的 神 技 ， 适 合 施 与 我 们 这 些 凡夫 俗 子 使 用 : 简易 的 事件 
绑 定 。 

到 底 有 多 简单 呢 ? 假设 我 们 想 让 页 面 上 的 大 标题 在 每 次 被 单 击 时 都 会 获得 一 个 惊叹 号 : 

$('h1i').click -> $(this) ,htmtL $(this) ,htmL() + 1 

这 段 代 码 选 出 页 面 上 的 所 有 hl 元素 , 然后 给 它们 每 个 都 绑 定 一 个 单 击 事件 。 当 单 击 事件 被 触 
发 时 ， 它 会 把 一 个 感叹 号 “!” 添 加 到 被 单 击 元 素 的 内 容 中 。 

事件 回调 函数 会 在 触发 该 事件 的 DOM 元 素 的 上 下 文中 被 调用 。 通 常 ， 如 上 面 的 例子 中 所 做 
的 一 样 ， 我 们 需要 使 用 $ (this) 把 上 下 文 元 素 jQuery 化 ?。 

假如 ， 为 相同 的 元 素 绑 定 多 个 同类 型 的 事件 会 怎么 样 ? 


$('h1') 
.Click(-> $(this).html $(this) .html() + '/') 
.Click(-> alert $(this).text()) 























由 即 把 上 下 文 元 素 变 为 jQuery 对 象 。 一 一 译 者 注 





70 第 5 章 jQuery Web 交互 开发 











每 一 次 cLick 调 用 都 是 作用 在 同一 元 素 上 ， 详 见 “jQuery 链 组 ”专题 。 注 意 这 里 的 空格 并 不 
是 必需 的 ， 它 们 仅仅 是 一 种 代码 格式 规范 。 我 们 很 容易 就 可 以 将 其 压缩 为 一 行 代码 : 
$('h1').cLick(-> ...).click(-> ...)。 这 就 意味 着 可 以 省 略 最 后 一 行 中 回调 函数 两 边 的 括 
号 ， 但 'h1' 和 第 二 行 中 回调 函数 的 括号 则 还 是 必需 的 。 

所 有 事件 处 理 函 数 会 按照 它们 被 添加 的 顺序 依次 调用 。 因 此 当 我 们 点 击 示 例 中 的 标题 ，'!' 
会 被 添加 到 它 的 内 容 中 ， 添 加 后 的 结果 会 在 一 个 (很 恼人 的 ) 提示 框 中 显示 出 来 。 

有 是 昕 我 说 ， 可 以 使 用 unbind 来 解 绑 定 函数 。 调 用 $elem.unbind() 会 解除 $elem 上 所 有 的 缠 
定 。 而 $elem.unbind 'cLick' 只 会 解 绑 定 所 有 的 单 击 事 件 。( 如 果 想 解 绑 特定 的 事件 该 怎么 办 ? 
可 以 看 本 章 最 后 的 练习 。 ) 
































jQuery 链 组 
来 看 看 这 个 : 


$( #L090  ) 
.CSss(fontSize: 64) 
.hover(-> $(this).css(fontweight: 'bold')) 
.Click(-> alert 'How dare you click the mighty logo!') 


我 们 在 这 里 使 用 了 链 一 一 几乎 所 有 的 jQuery 方法 都 会 返回 调用 它们 的 对 象 ,， 所 以 上 面 的 代 
码 与 下 面 这 段 等 价 : 


$logo = $('#L0go') 

$logo.css fontSize: 64 

$logo.hover -> $logo.css fontWeight: 'bold' 

$logo.click -> alert 'How dare you CLICK the mighty logo!' 


通常 米 讲 , 链 是 个 好 东西 一 一 通过 减少 重复 , 它 往 往 能 提高 代码 的 可 读 性 ,并且 还 能 减少 
代码 量 。 但 是 有 必要 提醒 一 下 : 一 些 jQuery 开 发 者 会 变 成 “ 链 式 狂人 ”， 将 他 们 的 整个 程序 转 
成 一 行 又 长 又 绕 的 代码 。 请 适度 使 用 它 。 





在 开始 项 目 之 前 ， 还 有 最 后 一 点 需要 了 解 。 还 记得 我 说 过 选择 表 不 是 “ 活 的 ” 吗 ? 好 了 ,这 
个 规则 有 一 个 特例 ， 即 使 用 “ 行 如 其 名 ”的 Live 方 法 来 绑 定 一 个 事件 时 。 让 我 们 看 一 个 例子 : 


$('#0LldSpiceGuy').live 'click', -> alert "I'm on a horse, 
$('body').html '<p id="oldSpiceGuy">The man your man could smell like</p>' 


尽管 起 初 第 一 行 代码 中 的 $('#oldSpiceGuy') 并 没 匹 配 任 何 元 系 ， 但 事件 处 理 函 数 还 是 能 
工作 。 明 白 了 吧 ， 不 同 于 jQuery 的 其 他 方法 ， 当 你 进行 选择 时 ，Live 方 法 并 不 关心 是 否 有 匹配 的 
元 素 ， 它 只 关心 选择 器 字符 串 本 身 (jQuery 允许 通过 ,selector 属 性 访问 该 字符 串 )。 

完整 解释 Live 实 现 的 原理 已 经 超出 了 本 书 的 范围 , 但 可 以 提 一 下 , 它 与 “事件 冒 泡 ”“ 有 关 。 


























GD http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ 
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5.5 ”项目 : 基于 浏览 器 的 5X5 游戏 


我 们 将 用 上 = Hy 3 个 类 文件 Grid.coffee 、Dictionary.coffee 和 Player.coffee 来 创建 浏览 久 
版 本 的 5 x 5 游戏 。 这 3 个 文件 封装 了 游戏 的 状态 和 逮 辑 。 我 们 还 会 添加 一 个 新 的 CoffeeScripf 文 件 
jgq5 x $.coffee， 它 将 定义 连接 index.html 和 style.css 的 接口 。 





5.5.1 Index.htm| 


为 了 进行 生产 部 署 ， 我 们 需要 将 CoffeeScript 代 码 编译 为 JavaScript， 然 后 把 这 些 代 但 压缩 合 
并 到 一 个 干净 的 代码 包 中 。 然 而 ， 从 需求 上 来 讲 ， 在 浏览 各 上 编译 也 没有 问题 ， 可 以 使 用 http:// 
jashkenas.github.comy/coffee-script/extras/coffee-script.js 上 的 coffee-script.js 来 实现 。 下 面 就 把 它 包含 
进来 ， 顺 便 也 把 原来 的 OWL2 单 词 列 表 和 jQuery 都 添加 进来 : 


jQuery/5x5/index.htmt 


<script type="text/javascript" src="corfee-scrIzpt. JS"></ScriIpt> 
<script type="text/javascript" src="0M2.7s"></ScrlLpt> 
<script type="text/Jjavascript" src="jquery-1.5.2.min.j;s"></script> 


现在 使 用 特殊 的 type="text/coffeescript" 属 性 把 源码 引进 来 。 





jQuery/5x5/index.htmt 


<script type="text/coffeescript" src="Grid.coffee"></script> 
<script type="text/coffeescript" src="Dictionary.coffee"></script> 
<script type="text/coffeescript" src="Player.coffee"></script> 
<script type="text/coffeescript" src="]jqg5x5.coffee"></script> 


噢 ， 还 需要 把 style.css 也 加 进来 。 


jQuery/5x5/index.html 

<link rel="stylesheet" type="text/css" href=",./style.css" /> 

页 面 的 head 部 分 就 好 了 , 现在 还 需要 给 body 添 加 3 个 元 系 一 一 一 个 名 为 message 的 p( 用 于 显 
示人 信息 )， 一 个 名 为 grid 的 div (用 来 容纳 方 格 )， 还 有 一 个 名 为 scores 的 table (你 猜 它 是 干 什 
么 用 的 ?7 ): 








jQuery/5x5/index.htm\ 


<body> 
<p id="message"></Pp> 
<div id="grid"></div> 
<table id="scores"> 
<tr> 
<th id="plname"></th> 
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<th id="p2name"></th> 
</tr> 
<tr> 
<td id="plscore"></td> 
<td id="p2score"></td> 
</tr> 
</table> 
</body> 


现在 在 浏览 妖 中 打开 index.html。( Chrome 用 户 必 须 使 用 -allow-file-access-from-files 
参数 来 打开 浏览 吉 。 否 则 ，Chrome 的 安全 策略 会 阻止 加 载 CoffeeScript 文 件 。 只 有 在 浏览 硕 中 直接 
加 载 本 地 文件 时 才 会 出 现 这 个 问题 ， 比 如 URL 为 file:/ 开 头 时 就 会 出 现 这 种 问题 。 在 下 一 章 中 ,我 
们 将 使 用 Node.js 提 供 站 点 服务 ， 以 localhost:// 代 之 。) 





59.5.2 Sstyle.css 


原则 上 讲 ，CSS 文 件 能 够 做 到 的 所 有 事情 ，jQuery 的 css 方 法 同样 可 以 做 到 。 但 是 ， 使 用 
静态 样式 通 稼 效率 更 高 。 例 如 ， 如 果 我 们 和 希望 页 面 上 的 所 有 文本 颜色 都 是 次 灰色 的 ， 只 需要 
7 

body { color: #333 } 

要 在 没有 样式 表 的 情况 下 做 到 这 一 点 ， 每 次 创建 包含 文本 的 新 元 素 时 都 不 得 不 调用 
$elem.css 'color'，'#333'。 这 很 讨厌 | 

为 了 避免 这 些 麻 烦 ， 现 在 让 我 们 来 看 下 该 如 何 布局 网 页 。 在 妈 rid div 中 使 用 5 行 ul ， 每 行 
ul 包含 5 个 ti 来 代表 5 x 5 方 格 。 我 们 希望 #grid 居 中 显示 ， 使 用 大 号 、 等 宽 字 体 : 











jQuery/5x5/style.css 
#grid { 
position: relative,; 
text-align: center; 
width: 480px; 
margin: l6px auto,; 
padding: 32px 0; 
border: 2px solid #555,; 
font-size: 64px; 
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", monospace; 


} 

为 了 让 所 有 行 都 能 模 回 显示 , 设置 ul 为 List-style:none, 并 且 把 Li 设置 为 dispLay:inLine。 
我 们 还 设置 了 cursor:pointer， 以便 鼠标 能 对 方 格 做 出 类 似 于 对 链接 那样 的 反应 。 男 外 ， 还 提供 
一 个 hover 效 果 , 让 方 格 在 鼠标 划 过 时 改变 颜色 。 当然 , 如 果 方 格 有 selected 类 样式 的 话 也 会 变色 。 


我 们 还 需要 一 些 其 他 CSS 元 条 。 包括 一 个 #message 用 于 提示 进行 下 一 步 移动 , 一 个 .notice 
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div 显 示 每 次 移动 的 结果 ， 还 有 一 个 #scores 表 格 : 


jQuery/5x5/style.css 


#message { 
position: relative,; 
text-align: Center ; 
margin: 32px; 
font-size: 24px; 


jQuery/5x5/style.css 


.Notice { 
position: relative; 
text-align: center.,; 
width: 486px; 
margin:; 0 auto,; 
padding: 1l6px 0; 
background: #eb4; 
font-size: 18px; 


jQuery/5x5/style.css 
#Sscores { 
position: relative,; 
text-align: Center ; 
width: 484px ; 
margin: 1l6px auto 
border: lpx solid #555; 
font-size: 24px; 


5.5.3 Jq5X5.coffee 
现在 轮 到 项 目的 核心 了 ! 我 们 从 定义 一 些 变量 开始 ， 且 这 些 变量 要 有 模块 级 作用 域 : 


jQuery/5x5/jq5x5.coffee 5 


grid = dlictionary = currPlayer = playerl = player2 = selectedCoordinates = nuLL 


创建 一 个 hewGame 函 数 ， 在 该 函数 中 为 绝 大 部 分 变量 赋值 。 











jQuery/5x5/jq5x5.coffee 


NewGame = -> 
grid = new Grid 
dictionary = new Dictionary (OWL2, grid) 
currPlayer = playerl = new Player('Player 1', dictionary) 


74 第 5 章 jQuery Web 交互 开发 


player2 = new Player('Player 2', dictionary) 
drawTiles() 


playerl.num = 1 

player2.num = 2 

for player in [playerl, player2] 
$("#p#{player.num}name").html player.name 
$("#p#{player.num}score").html 0 

showMessage 'firstTile' 


现在 ， 因 为 这 个 晒 数 引用 了 页 面 中 的 HTIML， 所 以 需要 保证 它 在 文档 没有 加 载 好 之 前 不 会 被 
调用 。 因 此 ， 它 应 该 是 在 $(document ) .ready 回调 时 被 调用 : 








jQuery/5x5/jq5x5.coffee 


$(document) ,ready -> 
newGame ( ) 
$('#grid Li').live 'click', tileClick 


你 可 能 想 知 道 hRewGame 中 的 drawTiles 了 水 数 。 下 面 就 是 drawTiles 滑 数 : 


jQuery/5x5/jq5x5 .coffee 


drawTiles = -> 

gridHtml = "' 

for x ln [0...grid.tiLes.Length] 
gridHtml += '<ul>' 
for y ln [0...grid.tiles.length] 

gridHtml += "<L1i id='tile#{x} #{y}'>#{grid.tiles[xl[yl]}</tLi>" 

gridHtml += “</UL>， 

$('#grid').html gridHtmt 


我 们 本 可 以 使 用 jQuery 分 别 产生 、 插 入 每 个 方 格 , 但 当 你 需要 一 次 性 向 文档 中 插入 一 大 堆 东 
西 时 ， 创 建 一 个 大 ol 的 HIML 字 符 串 并 不 是 一 件 坏 事 。 事 实 上， 这 种 实现 方法 一 般 效 率 最 高 ， 
为 修改 字符 串 比 修改 DOM 开 销 要 小 。 

现在 ， 在 我 们 能 处 理 输 入 之 前 ， 这 还 不 能 算是 一 个 游戏 一 一 我 们 需要 定义 tileClick, 在 该 
国 数 中 ， 我 们 将 使 用 jQuery 的 Live 困 数 把 它 绑 定 到 #grid 内 的 Li 元 素 上 。 为 什么 用 Live 而 不 是 
bind? 问 得 好 ! 这 是 因为 ,不管 绑 定 的 元 素 发 生 了 什么 Live 事 件 都 会 被 触发 一 一 元 素 可 以 被 完全 
销毁 也 可 以 凭空 创建 出 来 , 而 值得 信赖 的 Live 则 会 一 直 存在 。 除 此 之 外 , 还 有 效率 优势 一 一 Live 
只 需要 创建 一 个 事件 ， 而 bind 则 会 创建 25 个 。 


总 之 ， 下 面 就 是 单 击 一 个 方 格 时 发 生 的 事情 : 
































jQuery/5x5/jq5x5.coffee 
tileClick = -> 

$tile = $(this) 

if $tile.hasClass 'selected ' 
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# UnNdo 
selectedCoordinates = null 
$tile.removeClass 'selected i 
showMessage 'firstTile' 

else 
$tile.addClass 'selected' 


[x, yl] = @id.match(/(\d+)_(\d+)/)[1..] 
selectTile x, y 











jQuery 事件 回调 也 数 的 上 下 文 就 是 触发 该 事件 的 DOM 元 系 一 一 在 这 里 就 是 指 被 单 击 的 ti 元 
系 。 我们 将 这 个 元 素 包 狐 为 jQuery 对 和 象 ， 把 它 叫 做 $title。 如 琳 该 方 格 已 经 被 选中 ， 则 解除 选中 ， 
并 返回 来 让 玩家 选择 日 己 的 第 一 个 方 格 。 如 来 这 次 选择 合理 ,我 们 就 继续 执行 sSelectTile: 





jQuery/5x5/]Jjq5x5.coffee 
selectTlile = (x, y) -> 
if selectedCoordinates jis null 
selectedCoordinates = {xl: x, yl: y} 
showMessage 'secondTile,' 
else 
selectedCoordinates.x2 = x 
selectedCoordinates.y2 = y 


$('#grid Li').removeClass 'selected' 
doMove ( ) 





如 果 setectedCoordinates 为 nuLL， 说 明 这 是 玩家 第 一 次 选择 ， 因 此 仅 保 存 坐 标 。 和 否则 就 
表明 玩家 已 经 为 本 轮 选 好 了 两 个 方 格 ， 那 样 的 话 就 继续 执行 doMove， 它 通过 PLayer 实 例 来 移动 
方 格 并 制 表 以 显示 分 数 ， 然 后 再 在 一 个 通知 框 中 显示 结 


jQuery/5x5/jq5x5.coffee 
doMove = -> 
{moveScore, newWords} = CurrPLayer ,makeMove selectedCoordinates 
if moveScore is 0 
$notice = 
else 
$notice = $(""" 
<p class="notice"> 


$("#{currPplayer.name} formed no words this turn.") 


NWTN 
TACUIIT CAOYTIrT tOrmtC iiC OWLiii 


J 
<b>#{newWords.join(', ')}</b><br /> 
earning <b>#{moveScore / newWords.length}x#{newWords. length} = 
#{moveScore}</b> points! 
</p> 
Sp 
showThenFade $notice 
endTurn() 


#friirrD1 avarl formed the 了 
1 





使 用 showThenFade 会 让 人 赏 心 懂 日 ， 它 在 网 格 下 面 添 加 了 一 个 黄色 框 ， 在 它 从 DOM 实 体 上 
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被 完全 删除 之 前 会 有 变 扁 淡出 的 效果 : 


jQuery/5x5/jq5x5.coffee 


showThenFade = ($elem) -> 
$elem.insertAfter $('#grid') 
animationTarget = opacity: 0, height: 0, padding: 0 
$elem.delay(5000) .animate animationTarget, 500, -> $elem.remove!() 


最 后 ，endTurn 更 新 网 格 和 分 数列 表 ， 然 后 告诉 下 一 个 玩家 准备 上 场 。 
把 它们 合 到 一 起 时 游戏 是 什么 样子 呢 ? 如 图 $ 所 示 。 





Player 1, please select your first tile. 








12 45 


Player 1 Player 2 





图 5 ”jQuery 驱动 的 5 x 5 游戏 


当然 , 我们 还 可 以 添加 很 多 功能 特性 一 一 比如 , 一 个 已 经 使 用 过 的 单词 列表 ,每 轮 的 时 间 限 
制 ， 在 每 个 玩家 经 历 特定 回合 数 (或 者 一 定 的 时 间 ) 之 后 显示 一 个 “game over” 的 遮 幕 ;还 有 
梦幻 般 的 动画 和 交互 元 素 (比如 说 , 可 以 使 用 jQuery UT 实现 的 快速 拖 忠 效果 )。 不 过 我 把 这 些 都 
留 给 读者 目 己 去 探索 。 














GD http://jqueryui.com/ 
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5.6 未 来 是 jQuery 化 的 


在 本 草 中 , 我 们 接触 了 jQuery 的 所 有 基础 知识 , 这 是 网 页 开发 的 标准 类 库 中 与 JavaScript 关 系 
最 密切 的 部 分 。 你 学 会 了 使 用 选择 需 来 选择 元 素 ， 修 改 CSS 样 式 、HITML 属 性 ， 以 及 绑 定 事件 。 
从 头 开 始 创建 一 个 交互 式 网 页 应 该 不 再 会 让 你 直 骨 冷汗 了 。 

还 有 一 个 比较 重要 但 还 未 讨论 的 主题 就 是 Ajax。jQuery 让 与 服务 需 端 的 交流 变 得 非常 容易 。 
可 以 在 http://api.jquery.com/category/ajax/ 上 找到 相关 的 文档 。 

值得 一 提 的 是 ， 由 于 Node.js 的 存在 ，jQuery 现 如 今 可 以 很 容易 地 在 服务 右上 运行 。 这 是 如 何 
做 到 的 ?通过 一 个 叫做 jsdom 的 类 库 ， 它 可 以 在 Node 中 提供 一 个 模拟 的 浏览 器 环境 "。Jsdom 和 
jQuery 结合 的 一 个 极 好 案例 就 是 模板 。 如 果 可 以 直接 在 服务 器 上 使 用 jQuery, 来 修改 原生 的 HTML 
并 把 它们 发 布 出 来 ， 为 什么 还 要 再 为 使 用 服务 需 端 模板 引擎 而 操心 呢 〈 比方 说 Ruby on Rails 中 的 
ERB 文 件 ) ? 那样 的 话 ， 你 就 可 以 提供 一 个 原始 但 有 实际 意义 的 网 页 版 本 (有 利于 搜索 引擎 和 屏 
医 阅 谈 需 )， 然 后 再 在 客户 端 重用 同样 的 代 但 来 添加 新 的 内 容 。 

我 救 励 你 自己 试 试 Ajax 和 jsdom。 在 下 一 章 中 ， 我 们 将 采用 另外 一 种 方式 : 使 用 WebSocket 
在 服务 硕 和 客户 端 之 间 建 立 起 一 个 异步 的 双 通 道 通 信 。 使 用 Node.js 来 建立 $ x S$ 多 人 游戏 的 服务 央 
时 ， 我 们 会 更 加 了 解 Node.js。 















































5.7 练习 


(1)jQuery 新 手 通 第 (实际 上 , 几乎 是 全 部 ) 会 犯 的 一 个 错误 是 他 们 认为 jQuery 的 选择 各 是 “ 活 
的 "。 比方 说 , 他 们 认为 使 用 了 下 面 的 代码 之 后 ,就算 给 菜单 添加 新 条 目 (就 是 说 , 把 新 的 Li ( 列 
表 项 ) 作为 子 节点 添加 到 #menu 中 ) 也 会 被 隐藏 起 来 : 

$('#meny Li').hide!() 

大 错 特 错 ! 那 在 不 调用 单个 li 元 系 任 何方 法 的 前 提 下 ， 如何 实 现 所 期 望 的 功能 呢 ( 允许 使 用 
样式 表 ) ? 

(2) 下 面 这 段 代 码 的 作用 是 什么 ”world〈 世 界 ) 是 安全 的 吗 ? 

$('a').click(destroyWorld) ,unbind(' CLICKA ) 

(3) 下 面 有 3 种 选择 器 在 功能 上 是 等 价 的 , 请 问 哪 个 的 行为 与 其 他 的 不 一 样 , 又 为 什么 不 一 样 ? 

$('#9awayTeam .redShirt').diel() 

$('#awayTeam').find('.redShirt').diel() 


$('.redShirt, #awayTeam').die() 
$('.redShirt', $('#awayTeam')).diel() 


(顺便 说 一 句 ，die 的 确 是 一 个 jQuery 方法 一 一 它 为 使 用 Live 绑 定 的 事件 解 绑 定 ! ) 








GD http://jsdom.org/ 
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(4) 找到 下 面 这 段 代码 中 的 bug， 解 释 并 修改 。 
$('#drJjekyll').click -> 
alert ' Now I shall transform!' 
$('#drjekyll').attr 'id', 'mrHyde,' 
$('#drjekyll').unbind 'click' 














在 服务 右上 运行 JavaScript 一 直 都 是 Web 开 发 者 的 梦想 。 使 用 基于 JavaScript 服 务 融 端的 开发 
者 ， 无 需 在 客户 端 霹 言 和 服务 硕 端 语言 之 间 来 回 切换 ， 只 要 通晓 Web 程 序 世 界 的 通用 语言 
JavaScript， 或 者 21 世 纪 的 劳 系 语言 CoffeeScript 就 行 了 。 

现在 ， 这 个 梦想 终于 成 为 了 现实 。 本 章 将 从 介绍 模块 模式 〈CommonJS 标 准 的 一 部 分 ) 开始 
进行 一 段 徐 短 的 Node.js 之 旅 。 然 后 摘 清 楚 什 么 是 “事件 架构 ”及 其 对 服务 硕 端 性 能 、 编 程 思 想 的 
影响 。 最 终 ， 我 们 将 为 上 一 和 草 的 $ x 5 游戏 添加 一 个 Node 后 台 程序 ， 同 时 使 用 WebSocket 来 实现 实 
时 多 人 游戏 的 模式 。 








6.1 什么 是 Node.js 


不 要 受 名 字 的 影响 : Node.js 并 不 是 一 个 JavaScript 类 库 。 相反, 它 是 一 个 JavaScript 解 释 器 (由 
Google Chrome 浏 览 病 的 JavaScript 引 擎 V8 张 动 )， 它 提供 了 底层 操作 系统 调用 的 接口 。 通 过 这 种 
方式 ， 运 行 于 Node.js 上 的 JavaScript 可 以 谈 写 文件 ， 创 建 进程 ， 甚 至 还 可 以 收发 HTTP 请 求 一 一 这 
是 最 有 吸引 力 的 一 点 。 


与 CoffeeScript 一 样 ，Node.js 也 是 一 个 新 项 目 ( 可 追溯 到 2009 年 早期 )， 它 成 长 迅速 ， 并 众生 
了 很 多 激动 人 心 的 事物 。 看 看 Node.js Knockout" 吧 一 一 一 个 受 Rails Rumble” 启 发 的 编程 竞赛 ， 看 
谁 能 在 48 小 时 内 开发 出 最 好 的 Node 程 序 。 
已 经 有 许多 用 Node 和 CoffeeScript 写 成 的 很 棒 的 项 目 了 。 下 面 是 挑选 出 来 的 几 个 小 示例 项 目 。 
看 完 本 书后 你 可 以 回 过 来 看 看 这 个 列表 ， 阅 读 真 实 的 源码 是 提高 能 力 的 好 方法 。 
口 Docco[Ash11]: 车 名 计算 机 科学 家 Donald Knuth 提 倡 “ 文 学 化 编程 ”的 方法 论 。 其 洒 义 是 ， 
编写 的 代码 和 注释 要 让 那些 第 一 次 碰 到 这 个 程序 的 人 只 要 阅读 一 次 源码 就 能 理解 这 个 程 
序 。 由 Jeremy Ashkenas 开 发 的 Docco 就 支持 这 种 方法 论 ， 它 能 生成 深 亮 的 网 页 ， 并 在 网 页 











冯 














GD http://nodeknockout.com/ 
(2 Rails Rumble 是 一 个 编程 比赛 ， 在 该 比赛 中 ， 开 发 者 们 分 组 比赛 ,看 谁 能 使 用 Ruby on Rails 在 48 小 时 内 开发 出 最 好 
的 Node 程 序 。 一 一 译 者 注 
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中 并 排 显示 注释 和 代码 。 

口 Eco[Stel11]: 假设 你 正在 编写 一 个 基于 Node 的 Web 程 序 。 你 手头 上 有 了 所 有 HTML 框 架 和 
大 推 程序 代码 ， 但 是 你 却 不 知道 如 何 把 它们 结合 到 一 起 。Eco 人 允许 你 把 CoffeeScript 通 入 
HTML 标 签 中 ， 使 其 成 为 一 个 服务 硕 端 的 模板 语言 。 

口 Zappa[NM11]: 从 头 创建 一 个 完整 的 Web 程 序 从 来 就 没有 这 么 简单 过 。Zappa 构 建 在 Node 
的 流行 框 桨 Express 之 上 ， 只 需 通过 简单 的 描述 吏 能 定义 服务 天 该 如 何 处 理 任意 HITP 请 
求 "”。 它 还 能 完美 地 集成 Ecol 

口 Zombie.js[Ark11]: 全 栈 式 Web 程 序 测试 模块 领域 又 来 了 一 个 新 小 伙 : Zombie.js。Zombie 
人 允许 你 运用 Sizzle 强 大 的 能 力 验证 Web 程 序 的 行为 ， 而 Sizzle 同 时 也 是 jQuery 的 选择 天 引 
擎 。 它 不 仅 好 用 ， 而 且 还 异 稼 快 。 

https://github.com/jashkenas/coffee-script/wiki/In-The-Wild 上 列 出 了 非常 完整 的 程序 列表 , 它 包 

含 了 各 种 基于 CoffeeScript 的 程序 。 














6.2 使 用 exports 和 require 构建 模块 化 代码 


在 前 面 几 章 中 ， 我 们 曾 使 用 global 来 把 变量 存放 到 程序 级 的 命名 空间 中 。 但 global 有 其 适 
用 的 范围 ,Node 开 发 者 通常 更 愿意 让 每 个 文件 都 有 自己 的 命名 空间 ,以 保持 代码 的 整洁 和 模块 化 。 
那 一 个 文件 如 何 与 其 他 文件 共 吝 对象 呢 ? 

解决 办 法 就 是 使 用 一 个 叫做 exports 的 特殊 对 象 ， 它 是 CommonJS 模 块 标准 的 一 部 分 。 一 个 
文件 的 exports 对 象 会 在 男 外 一 个 文件 require 调 用 该 文件 时 返回 。 因 而 ， 举 例 来 说 ， 假 设 我 们 
有 两 个 文件 : 

















Nodejs/app.coffee 


util = require './util! 
console.log util.square(5) 


Nodejs/util.coffee 


console.log 'Now generating utility functions,.. 
exports.square = (x) ->XxX* x 
运行 命令 coffee app.coffee 时 , require './util' 执 行 util.coffee 后 返回 它 的 exports 


对 和 象 ， 你 会 得 到 如 下 结 


Now generating utility functions... 
25 





GD http://expressjs.com/ 
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你 可 能 会 问 为 什么 我 们 不 需要 指定 文件 扩展 名 ?在 Node.js 中 通常 可 以 省 略 文 件 扩展 名 .js。 不 
过 只 有 在 运行 的 程序 已 加 载 了 coffee-script 类 库 之 后 才 可 以 省 略 .coffee。 当 人 然 使 用 coffee 运 行文 件 
时 就 已 经 隐 式 地 加 载 了 这 个 模块 。coffee-script 同 时 也 会 告诉 Node.js 如 何人 处 理 CoffeeScript 文 件 。 
因此 ， 假 如 我 们 只 把 app 而 没有 把 util 编 译 为 JavaScript， 奢 就 必须 这 样 配 : 





Nodejs/app. js 

require('coffee-script'); 

var util = require('./util'); 

console.log(util.square(5)); 

当 遇 到 一 个 没有 上 这“.” 或 者 “./ 前 组 的 类 库 时 ，Node 就 到 它 的 类 库 目 录 中 寻找 匹配 的 文件 。 
可 以 使 用 require.paths 来 查看 类 库 目 录 。 

根据 约定 , 一 个 类 库 供 require 调 用 的 名 字 与 供 npm 安 六 的 名 字 是 一 样 的 。 比 方 说 ,回想 下 ， 
我 们 曾 使 用 命令 npm install -g coffee-script 来 安装 过 CoffeeScript。 这 个 命令 不 但 为 我 们 
安装 了 可 执行 的 coffee 二 进 制 文件 ， 同 时 还 安装 了 coffee-script 类 库 。 在 本 章 的 后 面 我 们 还 会 使 用 
npm 为 我 们 的 项 目 安 猴 更 多 其 他 的 类 库 。 














6.3 异步 思想 


开发 人 员 对 JavaScript 最 第 见 的 抱怨 之 一 便 是 缺乏 对 多 线程 的 文 持 。 像 Java、Ruby 和 Python 
这 类 流行 的 语言 都 允许 同时 运行 多 个 任务 ， 而 JavaScript 却 是 严格 单线 程 的 。 

然而 , 大 家 普遍 认为 JavaScript 这 个 乍 一 看 来 最 大 的 缺点 现在 却 是 祸 中 之 福 。 没有 多 线程 ,就 
没有 互 斥 锁 ， 没 有 竞争 条 件 ， 也 就 没有 无 止境 的 sLeep 循 环 ， 许 多 最 稼 见 的 软件 bug 来 源 都 被 规 
各 了 。 而 且 ,， 多 线程 程序 会 产生 很 大 的 开销 ， 对 服务 天 来 说 尤其 严重 ， 因 而 这 也 正 是 Node.js 获 此 
殊 采 一 一 依 徘 多 线程 实现 并 发 的 语言 的 高 效 蔡 代 框 染 一 一 的 原因 之 一 。 

(当然 ,没有 多 线程 ,就 不 能 有 效 利 用 多 核 处 理 器 .幸好 已 经 有 项 目 ( 例如 multi-node 和 cluster” ) 
能 把 多 个 程序 实例 绑 定 到 同一 个 服务 硕 端 口上 , 不 但 为 你 获得 并 行 处 理 的 性 能 优势 , 而且 又 让 你 
不 必 为 在 多 进程 之 间 共 享 数 据 而 头疼 。) 

为 JavaScript 面 回 事 件 而 不 是 面向 线程 , 所 以 事件 总 是 在 其 他 任务 执行 结束 之 后 再 运行 。 想 
象 一 下 ， 每 当 你 的 程序 ( 比方 说 ， 癌 文件 系统 或 者 一 个 HTTP 服 务 带 ) 发 出 一 个 请 求 ， 在 完成 请 
求 之 前 ， 它 会 完全 冻结 起 来 ， 这 是 多 么 叫 人 钥 形 啊 ! 因此 ， 在 Nodejs 中 几乎 所 有 的 API 函 数 都 会 
使 用 回调 : 你 发 出 请 求 , Nodejs 会 把 它 转发 出 去 , 你 的 程序 就 当 什么 都 没 发 生 过 而 继续 运行 下 去 。 
到 请 求 完 毕 〈 或 者 出 了 盆子 )， 你 传递 给 Node.js 的 函数 才 会 被 调用 。 
























































GD https://github.com/kriszyp/multi-node 和 https://github.com/learnboost/cluster 
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例如 ， 要 显示 当前 的 目录 内 容 ， 可 以 这 样 写 : 


fs = require 'fs' 

fs.readdir '.', (err, files) -> 
console.log files 

console.log 'This will happen first.,' 


运行 过 程 如 下 : 

(1) 使 用 fs. readdiri 让 Node.js 读 取 当 前 目录 内 容 ， 同 时 传递 一 个 回调 函数 ; 

(2) Node.js 将 请 求 传 达 给 操作 系统 后 就 立刻 返回 ; 

(3) 我 们 把 “This will happen first.” 打 印 到 控制 台 ; 

(4) 一 旦 代码 执行 完毕 ，Node.js 就 会 幼 上 查看 操作 系统 是 否 已 经 啊 应 了 我 们 的 请 求 。 如 果 已 
经 啊 应 ， 那 它 就 运行 我 们 的 回调 函数 ， 当 前 目录 中 的 文件 列表 就 会 被 打 印 到 控制 台中 。 

你 都 明白 了 吗 ? 理解 这 一 点 可 是 非常 重要 的 。 你 的 代码 永远 不 会 被 打 断 。 不 管 你 的 硬盘 转 得 
有 多 快 ， 在 所 有 代码 都 运行 完毕 之 将， 回调 函 数 都 不 会 被 执行 。JavaScript 代 人 码 永远 不 会 被 打 渐 。 
如 果 你 的 代码 被 一 个 死 循环 卡 住 了 ， 那 么 就 连 看 似 精 确 的 setTimeout 和 setInterval 也 会 永远 
J 

所 有 这 些 在 浏览 硕 中 成 立 的 ， 在 Node.js 中 也 都 成 立 。 但 是 在 Node 中 ， 对 它们 的 理解 变 得 更 
加 重要 ,这 是 因为 你 的 程序 逻辑 会 表现 为 复杂 的 链 式 回调 形式 。 训 无 疑问 ， 真 正 的 挑战 在 于 如 何 
以 某 种 人 类 能 理解 的 方式 来 掌控 它们 。 


考虑 如 何 处 理 提交 给 Web 程 序 的 简单 表单 : 


口 从 数据 库 中 获取 用 户 信 息 以 判断 是 否 允许 该 请 求 ; 
口 如 采 人 允许 ， 则 相应 地 更 新 数据 库 ; 
口 从 文件 系统 中 该 取 一 个 模板 ， 适 当地 定制 一 下， 然后 将 其 发 送 给 用 户 。 


那么 ,程序 骨 染 至 少 得 像 下 面 这 样 : 


formRequestReceijived = (req) -> 
checkDatabaseForPermissions req, -> 
updateDatabase req, -> 
renderTemplate req, (tmpl) -> 
sendResponse tmpl 


是 每 一 步 都 省 去 了 出 错 处 理 的 代码 ! 
遗憾 ， 没 办 法 避免 这 种 俄罗斯 套 娃 " 般 的 程序 结构 。 事 实 上 ， 在 多 数 依赖 线程 的 语言 
es 




















中 俄罗斯 套 娃 是 俄罗斯 特产 的 木 制 玩具 ， 一 般 由 多 个 图 案 类 似 的 空心 木 娃娃 一 个 套 一 个 地 构成 ， 数 量 可 以 是 多 个 。 
一 一 译 者 注 
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formRequestReceived = (req) -> 
if checkDatabaseForPermissions req 
updateDatabase req 
tmpl = renderTemplate red 
sendResponse tmpl 


但 是 这 类 语言 实际 上 都 是 在 把 异步 伪 疙 成 同步 。 在 每 个 数据 库 查询 和 文件 读 取 陶 数 中 ,都 有 
一 个 sleep 循 环 会 在 某 处 声称 :“ 我 多 希望 在 我 等 待 数 据 库 啊 应 的 时 候 ， 其 他 人 可 以 干 点 有 意义 
的 事情 。” 虽 然 这 从 表面 看 起 来 简单 ， 但 却 耗 费 了 内 存 和 CPU 资 源 ， 并 且 还 经 营 出 现 一 些 麻 烦 的 
意外 情况 。 

注意 , 方便 起 见 , 很 多 NodeJS API 函 数 确实 提供 了 同步 调用 的 版 本 。 例 如 , 作为 fs. readdir 
的 蔡 代 ， 可 以 直接 调用 fs. readdirSync， 这 样 就 能 方便 地 获取 文件 名 列表 。 如 有 条 你 的 程序 没有 
任何 等 待 触发 的 事件 ， 那 为 什么 不 使 用 这 种 便利 的 替代 方案 呢 ? 


不 笠 的 是 ， 尚 没有 办 法 使 用 JavaScript 或 者 CoffeeScript 实 现任 意 异 步 困 数 的 同步 版 本 。 除 非 
使 用 原生 的 扩展 (通常 是 使 用 C++ 编 瑟 的 ) 来 实现 ， 但 这 超出 了 本 书 的 范围 。 




















循环 中 的 作用 域 


回忆 一 下 我 们 在 2.2 节 学 到 的 : 只 有 函数 会 产生 作用 域 。 在 处 理 异 步 的 回调 时 ， 不 要 期 望 循 
环 能 产生 作用 城 ， 它 会 毁 了 你 的 ， 即 使 在 其 他 方面 做 得 再 好 也 没 用 。 事 实 上 ， 这 通 第 是 在 异步 代 
人 码 中 出 错 最 多 的 地 方 。 

举 个 例子 , 假设 有 一 个 程序 会 从 某 个 数据 源 ( 同步 的 ) 获取 一 些 数 字 ， 并 且 不 断 统 计 这 些 数 
字 ， 百 到 其 总 和 等 于 或 超过 某 个 Limit〈 限制 )。 在 获取 每 个 数字 后 ， 需 要 把 该 数字 以 及 到 目前 
为 止 的 数字 总 和 保存 起 来 。 并 且 , 由 于 过 于 注重 安全 ,每 次 保存 时 都 要 使 用 唯一 的 密 钥 来 加 密 给 
定 的 数字 。 且 这 个 密 钥 需 要 通过 异步 调用 getEncryptionkey 函 数 来 获得 。 

起 初 可 能 进行 如 下 符 试 : 

sum = 0 

while sum < limit 

sum += X = nextNum() 


getEncryptionkey (key) -> 
saveEncrypted key, x, sum # FAIL! 


可 问题 是 ， 在 调用 getEncryptionKey 的 回调 孙 数 时 ，x 和 sum 已 经 前 移 了 一 一 事实 上 ， 整 个 
循环 已 经 结束 。 因 此 随 着 循环 对 每 一 个 x 的 近代， 最 后 保存 下 来 的 是 循环 运行 结束 后 的 x 和 sum 的 
值 (多 半 用 的 是 错误 的 加 密 密 钥 )。 


解决 方案 就 是 捕获 x 和 sum 的 值 。 使 用 匿名 函数 是 最 简单 的 方法 。CoffeeScript 中 新 增 的 do 关 
键 字 就 是 二 这 个 用 的 : 
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Sum = 0 
while sum < limit 
sum += X = nextNum() 
do (x, sum) -> 
getEncryptionkKey (key) -> 
saveEncrypted key, x, sum # Success! 
如 条 你 丈 悉 Lisp 语 言 , 这 里 do 的 用 法 会 让 你 想起 Let 关 键 字 。 do (x, sum) -> ... 是 ((x, sum) 
-> ...)(x，sum) 的 简写 。 因 此 saveEncrypted key，x，sum 这 一 行 引 用 的 是 由 do 复制 的 x 和 
sum， 而 不 是 在 循环 中 使 用 的 x 和 sum。 
但 要 注意 , 这 样 做 会 覆盖 掉 外 层 的 x 和 sum, 使 它们 在 内 层 中 无 法 获取 。 如果 你 想 在 捕获 它们 
值 的 同时 还 能 够 利用 原来 的 变量 ， 可 以 这 样 写 : 


do -> 
capturedX = x; capturedSum = Sum 























关注 我 们 自己 的 小 项 目的 时 间 到 了 ， 来 使 用 基于 Node 的 后 台 程 序 扩展 jQuery 版 的 5 x $ 游 
戏 吧 。 





6.4 项 目 : 多 人 5X5 游戏 


我 们 将 建立 一 个 Web 服 务 右 端 以 便 大 伙 可 以 在 5 x 5 游戏 上 找到 对 方 。 在 客户 端 ， 我 们 仍然 使 
用 与 上 一 章 基 本 一 致 的 HIML 和 CSS。 服 务 硕 问 则 会 为 所 有 静态 文件 〈 当然 还 有 CoffeeScript ) 提 
供 服务 ， 并 且 会 对 游戏 的 状态 进行 处 理 。 

有 很 多 种 协调 客户 端 和 服务 硕 端 的 方式 。 客 户 端 与 服务 大 端 上 究竟 应 该 各 有 多 少 逻 辑 呢 ? 从 
概念 上 来 讲 ， 很 多 框架 ( 比如 说 Backbone.js ) 都 能 让 这 个 问题 变 得 简单 "。 通 党 来 讲 ， 为 了 性 能 
把 一 部 分 逻辑 放 在 客户 端 , 为 了 安全 把 一 部 分 逻辑 放 在 服务 硕 端 是 相对 比较 理想 的 , 而 且 两 者 还 
有 可 能 重合 。 但 对 于 我 们 来 说 ， 更 偏 癌 一个“ 哑 客户 疾 ” 的 实现 , 将 所 有 的 逻辑 处理 放 到 服务 各 
端 。 也 就 是 说 每 当 玩 家 做 了 一 次 移动 ， 就 会 进行 下 面 这 样 的 处 理 : 

口 玩家 A 的 客户 端 会 发 送 移动 信息 〈 也 就 是 被 交换 的 方 格 的 坐标 ) 到 服务 器 病 ; 

口 如 果 是 合法 的 移动 ， 服 务 融 端 会 把 移动 产生 的 结果 发 送 给 两 个 客户 端 ; 

口 两 个 客户 闹 分 别 显 示 结 果 。 

很 简单 ， 不 是 吗 ? 这 种 实现 方式 让 客户 端 类 库 变 得 很 轻 ， 因 为 Dictionary、Grid 和 PLayer 
类 只 需要 存在 于 服务 器 病 就 可 以 了 (更 别 说 2.1 市 提 到 的 2.1 MB 的 合法 单词 列表 了 )。 它 的 缺点 是 ， 
玩家 看 到 的 操作 结 采 会 相对 其 操作 稍 有 延 运 ,在 真实 的 程序 中 ,我 们 会 放 更 多 心思 在 啊 应 优化 上 。 
( 举 个 例子 ，Google Docs 会 同步 用 户 输入 的 每 一 个 单词 到 服务 硕 。 但 你 能 想象 如 末 百 到 服务 硕 接 
受 了 这 些 字 符 才 能 在 显示 如 中 看 到 它们 吗 ? 那 会 让 人 多 么 诅 丧 ! ) 






























































GD http://documentcloud.github.com/backbone/ 
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我 们 会 用 到 两 个 文件 : 5 x 5client.coffee 和 5 x 5server.coffee。 让 我 们 从 服务 上 疾 问 开始 。 


6.4.1 5X5server.coffee 


我 们 将 基于 著名 的 Connect 框 架 " 构 建 服务 器 端 。Connect 扩 展 了 Node 自 己 的 net 模 块 , 反 过 来 
又 被 更 为 健壮 的 框架 ( 比如 说 Express 或 者 Zappa ) 做 了 进一步 扩展 。 对 于 更 为 复杂 的 程序 来 说 ， 
你 绝对 应 该 研究 一 下 其 他 添加 了 更 多 优雅 的 特性 的 框架 ， 比 如 可 用 来 定义 URL 路 由 的 DSL 等 。 不 
过 ， 对 于 我 们 这 个 单 页 的 程序 来 说 ，Connect 更 为 适合 。 让 我 们 先 把 它 安 装 好 : 

$ npm install connect 

( 请 确认 在 项 目 目录 中 运行 这 行 命令 ,或 是 加 上 -g 参 数 全 局 安装 。 ) 

现在 从 创建 一 个 Connect 的 server 实 例 开 始 构建 我 们 的 服务 硕 端 : 








Nodejs/5x5/5x5server.coffee 


connect = require 'connect' 


app = Connect.create9erver 
connect.compilerl(src: _ dirname + '/client', enable: ['coffeescript'|]), 
connect.static( dirname + '/client'), 
connect .errorHandler dumpExceptions: true, showStack: true 


) 


port = 3000 
app. listen port 
console,.log "Browse to http://Llocalhost:#{port} to play" 


10 = require 'socket.,1io' 
socket = 10,Listen app 
socket .on 'connection', (client) -> 
if assignToGame client 
client.on 'message', (message) -> handleMessage client, message 
client.on 'disconnect', -> removeFromGame client 
else 
client.send “TULL 


assignToGame = (client) -> 
jdClientMaplclient.sessionld] = client 
return false if game.isFull() 
game .addPlayer client.sessionId 
If game.isFull() then welcomePlayers() 
true 





GD http://senchalabs.github.com/connect/ 
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removeFromGame = (client) -> 
delete 1dCLientMap[cLient .SessionId ] 
game.removePlayer CLient .SessionId 


welcomePlayers = -> 
players = [game.playerl, game.player2] 
info = {players, tiles: game.grid,.tiles, currPlayerNum: game.currPlayer.num} 
for player In players 
playerIinfo = extend {}, info, {yourNum: player.num} 
ijdClientMap[lplayer.idl].send "welcome:#{JSON.stringify playerinfo}" 


handleMessage = (client, message) -> 

{type, content} = typeAndContent message 

if type is 'move' 
return unless client.sessionld is game.currPlayer.id # no cheating! 
swapCoordinates = JSON.parse content 
{moveScore, newWords} = game.currPlayer.makeMove swapCoordinates 
result = {swapCoordinates, moveScore, newWords, player: game.currPlayer} 
socket.broadcast "moveResult:#{JSON.stringify result}" 
game .endTurn() 


typeAndContent = (message) -> 
[ignore, type, content] = message.match /(.*?):(.*)/ 
{type, content} 


extend = (a, others...) -> 
for 0 In others 
a[lkey] = val for key, val of 0 
a 
尽管 我 们 可 以 让 Connect 与 Apache 或 者 nginx 一 起 协同 工作 , 但 Connect 自 己 就 完全 有 能 力 为 我 
们 提供 静态 文件 〈 放 在 子 目 录 cLient 中 ) 的 服务 。 我 们 只 需要 在 它 的 configure 配 置 块 告 诉 它 
这 么 做 就 行 了 。 碰 到 错误 时 我 们 也 会 把 它 扔 到 一 个 错误 回调 中 , 不 然 的 话 ， 异 稼 会 被 默默 地 直接 


否 挥 。 











Nodejs/5x5/5x5server.coffee 


app = Connect,Ccreate9erver ( 
connect.compiler(src: _ dirname + '/client', enable: ['coffeescript'|]), 
connect.static( dirname + '/client'), 
connect.errorHandler dumpExceptions: true, showStack: true 


) 





启动 我 们 的 服务 器 还 剩 下 最 后 一 件 事 情 : 通过 Listen 气 数 告 诉 它 运行 于 哪个 端口 之 上 。 
Ne Mb 上 是 任意 的 。 在 生产 过 程 中 我 们 通常 使 用 标准 HTTP 服 务 磊 端口 890， 但 为 
了 避免 可 能 的 冲突 ， 可 以 使 用 3000 跨 口 : 





6.4 项 目 : 多 人 5x5 游戏 87 


Nodejs/5x5/5x5server.coffee 


port = 3000 
app. listen port 
console.log "Browse to http://Llocatlhost:#{port} to play" 


如 果 现 在 就 运行 手头 上 的 代码 ， 然 后 在 浏览 套 中 访问 http:/localhost:3000/， 则 会 目 动 转 到 
index.html 页 面 。 我 们 现在 只 需要 加 上 与 客户 端 通信 的 工具 就 行 了 。 但 该 如 何 实现 呢 ? 当 其 中 一 
个 玩家 移动 了 一 次 后 ,两 位 玩家 都 需 被 告知 操作 结果 。Ajax 并 不 适 于 处 理 此 类 工作 。 我 们 需要 的 
是 一 种 在 任何 时 候 都 能 把 数据 从 服务 硕 马 上 广播 到 多 个 客户 端的 方法 。 

很 苇 运 ， 一 种 称 为 WebSocket 的 新 技术 正好 对 此 提供 了 文 择 。 并 且 有 一 个 Node 类 库 Socket.io 
让 这 件 事 情 变 得 更 加 简单 。 钊 上 添 花 的 是 ， 在 不 文 持 WebSocket 的 浏览 禹 中 它 会 目 动 降级 为 其 他 
的 协议 。 

我 们 可 徘 的 npm 方 式 来 安 沽 Socket.io: 
$ npm install socket.io 


现在 把 它 用 在 服务 右上 : 

















Nodejs/5x5/5x5server.coffee 


io = reduire 'socket.10' 
socket = 10,Listen app 
SoOCket.on 'connection', (client) -> 
If assignToGame client 
client.on 'message', (message) -> handleMessage client, message 
client.on 'disconnect', -> removeFromGame client 
else 
client,.send 'full! 


每 当 客户 问 连 接 到 服务 侣 时 , 我 们 就 会 得 到 一 个 Socket.io 的 client 实 例 。 我 们 实现 了 两 个 回 
调 函 数 : 一 个 是 用 于 客户 问 发 送 消 县 ( 就 是 一 次 移动 ) 时 的 回调 函数 ,万 一 个 则 是 用 于 客户 端 断 
开 连 接 时 的 回调 函数 。 我 们 还 会 蕊 上 把 这 个 客户 并 分 配 到 游戏 中 去 。 

人 简单 起 见 , 服务 硕 问 在 同一 时 刻 只 服务 一 个 游戏 , 但 是 既然 游戏 状态 已 经 封 猴 在 Game 类 中 了 ， 
所 以 把 这 个 项 目 扩展 到 同时 能 服务 多 个 游戏 的 服务 喜 应 该 也 很 简单 。 这 样 我 们 就 只 需要 使 用 两 个 
模块 级 作用 域 变 量 了 ( 当然， 此 外 还 会 有 一 些 函 数 ): 游戏 本 身 和 一 个 客户 端 对 应 ID 的 散 列 表 。 











Nodejs/5x5/5x5server.coffee 


game = new Game 
jdClientMap = {} 


现在 每 个 Player 实 例 都 有 一 个 id 属 性 ， 所 以 当 我 们 需要 给 某 个 特定 的 玩家 发 送信 息 时 ， 就 
可 以 使 用 idCLientMap 来 获取 它们 对 应 的 cLient 对 象 了 。 下 面 是 如 何 向 游戏 中 添加 一 个 新 的 客 
户 问 : 
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Nodejs/5x5/5x5server.coffee 


assignToGame = (CLient) -> 
jdClientMap[lclient.sessionId] = client 
return false If game.isFull() 
game .addPlayer client.sessionId 
If game.isFull() then welcomePlayers() 
true 


一 旦 游戏 玩家 达到 两 个 , 我 们 会 分 别 给 他 们 发 送 欢 迎 信息 外 加 方 格 列表 和 分 数 。 同 时 还 考虑 
到 万 一 游戏 进行 中 有 人 加 入 进来 的 情况 : 


Nodejs/5x5/5x5server.coffee 


welcomePlayers = -> 
players = [game.playerl, game.player2] 
info = {players, tiles: game.grid,.tiles, currPlayerNum: game.currPlayer.num} 
for player in players 
playerIinfo = extend {}, info, {yourNum: player.num} 
ijdClientMap[player.id].send "welcome:#{JSON.stringify playerinfo}" 


注意 到 这 里 的 extend 了 吗 ? 它 是 一 个 把 某 个 对 和 象 的 属性 添加 到 为 一 个 对 象 上 的 小 工具 。 它 
与 Underscore.js 的 .extend 是 等 价 的 : 


Nodejs/5x5/5x5server.coffee 


extend = (a, others...) -> 
for 0 in others 
a[lkey] = val for key, val of 0 
a 


还 剩 一 件 事 情 没有 做 一 一 处 理 玩 家 的 移动 : 








Nodejs/5x5/5x5server.coffee 


handLeMessage = (client, message) -> 

{type, content} = typeAndContent message 

if type is 'move' 
return unless CLient ,sessionId is game.currPlayer.id # no cheating! 
swapCoordinates = JSON.parse content 
{moveScore, newWords} = game.currPlayer.makeMove swapCoordinates 
result = {swapCoordinates, moveScore, newWords, player: game.currPlayer} 
socket.broadcast "moveResult:#{JSON.stringify result}" 
game .endTurn() 


注意 到 ， 我 们 使 用 客户 端 由 Socketio 产 生 的 互 不 相同 的 会 话 ID 做 一 个 简单 的 安全 检测 , 来 防 
止 某 些 玩家 冒充 其 他 玩家 移动 。 在 计算 出 移动 的 结果 之 后 ， 使 用 socket,broadcast 一 一 当 你 想 
给 所 有 连接 中 的 客户 端 发 送 相同 的 信息 时 ， 这 种 方法 很 简 清 。 
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6.4.2 5x5client.coffee 


那 我 们 在 客户 端 如 何 与 Socket.io 进 行 交 互 呢 ?” 其 实 很 方便 ，Socket.io 为 我 们 提供 了 一 个 客户 
喘 类 库 ， 我 们 只 需要 将 其 包含 进来 就 行 : 


Nodejs/5x5/client/index.html 


<script type="text/javascript" src="/socket.io/socket.1io0.i7s"></script> 

如 果 你 特别 豆 欢 寻根 问 确 , 应 该 会 注意 到 在 我 们 的 静态 日 录 中 并 没有 socket.io.js 文 件 。 可 是 ， 
如 果 你 回 服 务 融 请 求 它 ， 它 还 真 就 在 那里 ! 

这 证 明了 服务 需 端 的 Socketio 类 库 能 够 自动 为 它 目 己 的 客户 端 类 库 提 供 服 务 。 当 然 ， 发 布 产 
品 时 你 会 想 要 压缩 它 并 且 把 它 和 其 他 脚本 打包 到 一 起 ,但 是 在 开发 过 程 中 , 这 个 特性 却 非常 好 用 。 
如 果 你 在 服务 从 问 把 Socket.io 升 级 到 一 个 新 的 版 本 ， 就 不 用 为 提供 一 个 新 的 客 己 器 类 库 担 心 了 ， 
为 它 已 经 为 你 做 好 了 。 


那 我 们 到 底 该 如 何 使 用 它 呢 ? 没 错 ， 这 实际 上 与 我 们 为 服务 带 闪 所 写 的 代码 类 似 : 























Nodejs/5x5/cLient/5x5cLient.coffee 


$(document) . ready -> 
$('#grid Li').live 'click', tileClick 
socket = new io.Socket() 
socket.connect() 
socket.on 'connect', -> showMessage 'waitForConnection' 
socket.on 'message', handleMessage 


我 们 需要 处 理 两 种 消息 : 初始 的 欢迎 信息 和 每 次 移动 的 结 采 信息 : 





Nodejs/5x5/cLient/5x5cLient.coffee 


handleMessage = (message) -> 
{type, content} = typeAndContent message 
switch type 
when 'welcome' 
{players, currPlayerNum, tiles, yourNum: myNum} = JSON.parse content 
startGame players, currPlayerNum 
when 'moveResult' 
{player, swapCoordinates, moveScore, newWords} = JSON.parse content 
showMoveResult player, swapCoordinates, moveScore, newWords 


startoGame = (players, currPlayerNum) -> 
for player in players 
$("#p#{player.num}name").html player.name 
$("#p#{player.num}score").html player.score 
drawTiles() 
if myNum is CurrPLayerNum 
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startTurn() 
else 
endTurn() 


showMoveResult = (player, swapCoordinates, moveScore, newWords) -> 
$("#p#{player.num}score") .html player.score 
$notice = $('<p class="notice"></p>') 
if moveScore is 0 
$notice.html "#{player.name} formed no words this turn," 
else 
$notice.html """ 
#{player.name} formed th 
earning <b>#{moveScore / newWords. length}x#{newWords. Length} 
= #{moveScore}</b> points! 
showThenFade $notice 
swapTiles swapCoordinates 
If player.num isnt myNum then startTurn() 


这 就 搞定 了 ! 和 镜 下 的 代码 就 与 上 一 章 中 的 版 本 非常 类 似 了 一 一 事实 上 ,还 变 人 简单 了 ， 因 为 游 
戏 逻 辑 处 理 已 经 放 到 了 服务 融 端 。 
运行 coffee 5x5server.coffee， 你 会 收 到 这 样 的 邀请 : 


Browse to http://localhost:3000 to play 
打开 两 个 浏览 杭 ， 证 它们 都 访问 这 个 地 址 ， 结 末 如 图 6 所 示 。 





ANA Multiplayer 5x5 OO Fm tiplayer sx5 
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3 CO localhost:3000 i 入 














Waiting for the other player to make a move... 


Please select your first tile. 
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0 0 Player 1 Player 2 


0 0 























图 6 ”多 人 5 x 5 游戏 试 玩 
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6.4.3 都 结束 了 


厉害 一 一 你 使 用 Node.js 和 WebSocket 创 建 了 一 个 很 漳 〈buzzword-compliant”) 的 多 人 游戏 程 
序 ! 它 有 可 能 不 是 下 一 个 在 YouFace 上 自动 一 时 的 病毒 式 传播 的 程序 , 但 是 它 证 明了 使 用 前 沿 Web 
技术 实际 上 也 非常 容易 。 

当然 ， 对 于 更 大 规模 的 程序 ， 你 应 该 用 一 个 更 加 健壮 的 Web 框 架 ( 比如 Brunch 或 者 是 之 前 提 
到 的 Zappa ) >， 连 上 一 个 数据 库 (Node.js 已 经 能 够 非常 好 地 与 MySQL 、MongoDB 和 Redis 数 据 库 
绑 定 在 一 起 了 ), 并 且 加 上 日 志 、 跟 踪 和 性 能 监控 ( 可 能 是 使 用 时 党 的 基于 Node 的 Hummingbird”)。 
真 令 人 司 讶 ，Node 生 态 环 境 是 如 此 活跃 ， 它 甚至 还 没有 发 布 1.0 厂 呢 ! 


6.5 客户 疹 、 服 务 器 痛 一 一 有 何不 同 


本 章 我 们 仪 学 习 了 Node.js 的 皮毛 。 虽 人 然 还 很 年 轻 ， 但 是 Node 已 经 是 一 个 拥有 繁 宁 社区 生态 
的 强大 框架 了 ， 并 且 让 CoffeeScript 成 为 能 独立 于 浏览 大 之 外 的 语言 。 

Node 频 繁 曝光 ， 一 部 分 原因 是 它 的 事件 架构 ， 构 建 于 无 阻塞 1O 之 上 让 其 成 为 那些 依赖 多 绑 
程 Web 平 台 的 有 效 蔡 代 。 但 是 让 “程序 猿 ””( code monkey ) 们 更 为 兴奋 的 是 我 们 可 以 使 用 同一 
种 语 言 来 编写 客户 问 和 服务 带 病 的 代码 ,其 至 把 代码 从 一 问 迁 移 到 为 一 疾 了 ,由 它 衍 生 的 技术 ( 从 
测试 到 模板 再 到 验证 ) 都 才刚 开始 被 人 探索 。 谁 知道 接 下 来 会 是 什么 ? 

唉 ， 说 句 题 外 话 ， 特 此 祝 唤 你 已 经 谈 完 了 本 书 ! 你 现在 已 经 学 会 了 如 何在 客户 问 和 服务 冀 病 
环境 中 使 用 CoffeeScript， 运 用 它 强大 的 功能 ， 你 比 世 界 上 最 伟大 的 JavaScript 程 序 员 所 写 的 代码 
更 短 、 更 清晰 ( Resig”， 没 有 私人 恩怨 哦 )。 

记 住 你 已 经 是 CoffeeScript 大 学 的 一 名 毕业 生 了 ， 别 饼 了 : 简洁 就 是 优美 ! 


6.6 练习 
下 面 这 段 代码 是 干 么 的 ? 


countdown = 10 

h = setInterval (-> countdown--), 100 
do (->) until countdown is 0 
clearInterval h 

console.log 'Surprisel!' 


(附加 练习 : 重 写 这 段 代码 以 实现 编码 者 想 要 实现 的 目标 ) 



























































Q) buzzword-compliant 是 用 来 形容 某 个 特定 的 产品 支持 某 些 特性 仅 是 因为 这 些 特性 当下 非常 流行 。 一 一 译 者 注 

@) http:Wbrunchwithcoffee.comy/ ( 现 该 网 址 会 直接 跳 转 到 http://brunch.io/ )。 

(GB) Hummingbird ( 蜂鸟 ) 是 一 个 网 站 监控 工具 ， 能 够 让 你 实时 地 看 到 用 户 是 如 何 与 网 站 进行 交互 的 。 一 一 译 者 注 
由 贬义 词 〈 特 指 以 编程 为 生 或 者 仅 会 写 点 小 程序 无 法 驾驭 复杂 程序 的 程序 员 ) 或 是 程序 员 的 自 嘻 。 一 一 译 者 注 
@) 这 里 的 Resig 就 是 John Resig，jQuery 之 父 ， 是 现在 全 世界 最 车 名 的 JavaScript 程 序 员 。 译 者 注 

















练习 答 宗 


A.1 了 艺 数 、 作 用 域 和 上 下 文 


2.9 节 练习 答案 。 

(1) CoffeeScript 中 的 函数 会 返回 最 后 一 个 表达 式 的 信 一 一 在 本 练习 中 就 是 spLice 方 法 的 返 
器 值 。 像 下 面 这 样 添加 一 个 新 行 就 能 改变 返回 结 

clearArray = (arr) -> 


arr.splice 0, arr.length 
arr 


添加 之 后 返回 的 就 是 当前 为 空 的 数组 arr。 如 下 的 方法 可 以 使 该 函数 无 返回 值 : 
clearArray = (arr) -> 


arr.splice 0, arr.length 
return 


(2) 可 以 采用 两 种 方法 来 实现 ， 两 种 方法 者 可行。 这 是 第 一 种 : 


run = (func, args...) -> func.apply this, args 





A 


于 _. 

run = (func, args...) -> func.call this, args... 

注音， 在 期 望 的 上 下 文中 调用 run 哺 数 ， 通 过 this 就 能 把 上 下 文 传递 进去 。 

(3) 对 于 规则 “ 隐 式 括号 直到 行 尾 才 闭 合 ”来 说 , 后 级 操作 和 从 (if/unless 和 for/while/until ) 
大 概 是 唯一 的 例外 。 例 如 ， 下 面 的 这 几 行 代码 都 是 等 价 的 : 


return abortMission warning If warning? 
return abortMission(warning) If warning? 
if warning? then return abortMission warning 
If warning? then return abortMission(warning) 


显 式 地 加 上 下 到 行 尾 的 括 扎 会 完全 改变 代码 的 含义 : 
return abortMission(warning If warning?) 


不 管 怎 样 ， 现 在 我 们 都 调用 了 abortMisson,， 返回 (return ) 了 值 ! 虽然 对 表达 式 warning 
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if warning? 进 行 了 求人 ,但 对 结果 几乎 没什么 影响 〈 奉 warning 为 nuLL， 则 表达 式 会 将 其 转 为 
undefined， 寿 为 其 他 值 则 直接 使 用 这 些 值 而 不 作 修改 )。 

(4) CoffeeScript 不 允许 在 因数 和 显 式 括号 之 间 存 有 空格 。 因 为 这 将 会 完全 改变 表达 式 两 侧 括 
号 的 意义 。 下 面 举 些 例子 : 














f g h 
这 个 表达 式 的 真实 意思 是 : 
f(g(h)) 
把 它 忆 下面 的 表达 式 比较 下 看 看 : 
f (g) h 
这 是 括号 的 真正 含义 : 
f(g)(h) 





以 下 是 CoffeeScript 的 规则 : 如 果 在 标识 符 之 后 和 留 有 空格 〈 除非 空格 后 面 有 后 级 操作 符 )， 那 
么 这 个 标识 符 就 是 一 个 包含 隐 式 括号 的 函数 。 

(5) foo .bar.baz() 运 行 时 的 上 下 文 是 foo .bar。G@hoo 的 上 下 文 是 this( 就 是 @ ), @hoo. rah() 
的 上 下 文 是 @hoo。 


(6) 当 且 仪 当 what 是 this 时 , what .x 和 @.,x 才 等 价 。 再 者 , 虽然 what ,x 和 this .x 完全 有 可 能 
指 问 同 一 个 对 象 ， 但 what .x=y 并 不 会 修改 this .x， 除 非 what 就 是 this。 


只 需要 写 一 句 xinContext.call what 就 能 解决 示例 代码 中 的 问题 。 
(7) 这 段 代 码 因 x=x 而 出 错 了 ， 因 为 这 样 写 是 无 效 的 。 再 看 一 过 有 问题 的 代码 : 


x = true 
showAnswer = (x = x) -> 

console.log If x then 'It works!' else 'Nope.' 
showAnswer() 


回忆 下 ， 默 认 人 参数 的 语法 a=b 其 实 就 相当 于 在 晒 数 体 的 开始 处 多 加 了 一 句 a ?= b。 且 没有 办 
法 把 x 从 外 层 作 用 域 引 入 函数 。 要 么 使 用 showAnswer x， 要 么 避免 变量 履 盖 来 解决 这 个 问题 。 























A.2 集合 与 达 代 


3.9 节 练习 答案 。 

(1) 当 你 调用 sLice 函 数 时 , 其 返回 值 是 一 个 新 数组 , 该 数组 包含 了 原始 数组 部 分 或 者 全 部 的 
项 。 添 加 、 删 除 或 蔡 换 这 个 数组 中 的 项 都 不 会 影响 原始 数组 。 这 就 是 你 在 很 多 晒 数 中 都 看 到 
arr.slice[0..] 的 原因 一 一 当 有 人 传 给 你 一 个 数组 ,而 你 希望 对 其 进行 修改 以 满足 自己 的 需要 
时 ,使 用 数组 的 副本 通常 是 一 种 的 得 体 的 用 法 。 
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(2) 对 于 下 面 的 代码 ， 明 日 这 一 点 非 稼 重要 一 一 once 图 数 只 被 调用 了 一 次 : 
once = -> 
if once.hasRun 
null 
else 
once.hasRun = true 
[2 
console.log x for x in once() 
最 后 一 行 相当 于 : 
onceResult = oncel() 
console.log x for x in onceResult 


人 简 而 言 之 ， 在 for 循 环 中 ，CoffeeScipt 会 自动 缓存 函数 的 运行 结果 。 如 果 你 希望 在 每 次 循环 
迭代 时 都 调用 孔 数 ， 那 么 应 该 使 用 while 或 者 until。 


(3) 看 下 面 这 上 段 : 
for x in [1, 2] 
setTimeout (-> console.log x), 50 


输出 如 下 : 


2 
2 


这 是 怎么 回 事 ? 这 里 的 关键 在 于 x 变 量 有 且 只 有 一 个 。 当 循环 结束 且 x 变 为 2 后 , 定时 天才 会 
被 调用 ， 因 此 这 就 与 图 数 定 义 时 的 x 值 无 关 了 。 即 使 把 超时 时 间 改 为 0 也 无 济 于 事 ，setTimeout 
会 把 其 目标 添加 到 “事件 队列 ”中 ， 只 有 在 其 他 所 有 代码 运行 完毕 后 ， 该 队列 中 的 函数 才 会 被 
调用 。 

最 简单 的 解决 办 法 就 是 使 用 do 语句 将 每 次 循环 迭代 时 的 x 值 捕捉 下 来 : 

for x lin [1, 2] 


do (x) -> 
setTimeout (-> console.log x), 50 
(4) 这 里 有 个 函数 可 以 检查 给 定 的 对 象 是否 包 含 菜 个 特定 的 值 : 
objContains = (0bj，match) -> 
for k, v of ob]j 
if v is match 


return true 
false 


注意 ， 虽 然 没 用 到 k 但 它 是 必要 的 : of 的 语法 总 是 按照 key ,value 这 样 的 顺序 排列 ， 而 我 们 
需要 的 是 其 中 的 value。 

在 实践 中 ,应 该 确保 不 使 用 此 类 循环 。 哈 希 结 构 的 要 点 就 是 假如 已 知 键 名 的 话 就 能 快速 地 取 
到 对 应 的 值 。 如果 需要 频繁 地 检测 一 个 哈 希 中 是 否 有 某 个 值 的 话 , 应 当 使 用 其 他 类 型 的 数据 结构 。 

(5) 要 让 某 个 函数 运行 一 次 后 再 重复 运行 ， 直 到 满足 某 个 条 件 时 结束 ， 可 以 这 样 写 : 
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doAndRepeatUntil = (func, condition) -> 
func.call this 
func.call this until condition() 


(6) 要 获取 wordList 数 组 中 最 短 字 符 串 的 长 度 ， 可 以 像 下 面 这 样 写 
Math.min.apply Math, (w.length for w In wordList) 


数组 解析 (w.Length for w in wordList) 会 产生 包含 wordList 列 表 中 所 有 字符 串 长 度 
的 数组 。 使 用 apply 把 这 个 巨大 的 参数 列表 传递 给 Math .min。( 传递 给 apply 的 第 一 个 参数 确保 
了 Math .min 是 在 Math 这 个 上 下 文中 运行 的 ， 就 像 下 接 调 用 Math .min 一 样 。) 这 虽然 不 是 最 高 效 
的 ， 但 很 简 清 。 


A.3 模块 和 类 


4.7 节 练习 答案 。 


(1) 为 什么 这 段 代码 两 次 输出 不 同 的 老 格言 


root = global ? window 




















root.aphorism = 'Fool me 8 or more times, shame on me' 


do restoreO0ldAphorism = -> 
aphorism = 'Fool me once, shame on YOU 
console.log aphorism 


console.log aphorism 

这 里 的 问题 就 是 restore0LdAphorism 在 自己 的 作用 域 中 声明 了 一 个 新 的 名 为 aphorism 变 
量 。 编 译 需 并 不 知道 ， 给 root. ee 个 同名 的 变量 。 
CoffeeScript 中 的 作用 域 规则 只 对 形 如 aphorism = ... 这 样 简 单 的 赋值 适 


读 取 root .apho rism 就 行 ， 但 是 要 赋值 的 话 承 必 须 使 用 root .aphorism。 
(2) 下 面 的 代码 叫 人 迷惑 ， 因 为 GewishesLeft 同 时 指 回 了 一 个 原型 属性 和 一 个 实例 属性 。 


Genie = -> 
Genle: :wishesLeft = 3 








Genie::grantWish = -> 
if GwishesLeft > 0 
console.log 'Your wish is granted!' 
@wishesLeft-- 


这 样 会 让 每 个 精灵 都 得 到 3 次 许愿 的 机 会 ， 而 不 是 限制 所 有 精灵 一 共 3 次 。 
想 弄 清楚 为 什么 ， 请 考虑 : 
GwishesLeft- - 
这 行 代码 相当 于 GwishesLeft = @wishesLeft - 1， 当 它 在 Genie 实 例 ( 且 称 它 为 geniel ) 中 
首次 运行 时 ， 会 谈 取 Genie: :wishesLeft 的 仁 ， 将 其 减 1， 然 后 把 减 后 的 值 赋 值 给 该 实例 的 一 个 
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新 属性 一 一 genie1l.wishesLeft! 

就 像 读 取 直 接 依 附 其 上 的 属性 一 样 ， 可 以 从 对 象 上 读 取 原型 属性 。 但 当 你 使 用 obj .x=y 时 ， 
就 只 能 为 该 对 象 目 己 的 属性 赋值 〈 会 隐 式 地 顽 靖 掉 与 之 同名 的 原型 属性 )。 

通常 ， 决 对 不 应 该 给 原型 属性 和 实例 属性 起 同样 的 名 字 *。 该 练习 的 最 佳 解决 方案 就 是 把 
Genie: :wishesLeft 和 GQwishesLeft 都 蔡 换 为 Genie.wishesLeft。 

(3) 答案 是 以 给 出 的 定义 为 基础 的 : 


class Season 
class Spring extends Season 








(new Season). proto . proto 和 和 (new Spring). proto . proto . proto 
都 与 {}. proto 一 样 ， 都 是 默认 对 象 ~ 的 原型 。 

(4) 被 绑 定 在 类 上 的 困 数 的 行为 与 预期 保持 一 致 。 调 用 foo=new Foo() 时 ， 在 Foo 中 使 用 => 
定义 的 实例 方法 会 日 劲 把 实例 绑 定 为 上 下 文 。 

有 95% 的 概 认 会 如 你 所 期 望 的 那样 。 但 是 函数 乡 定 在 代码 量 和 实例 化 时 间 两 方面 都 会 产生 和 额 
外 的 开销 ， 因 此 它们 并 不 适用 于 以 性 能 为 重 的 代码 。 


A.4 jQuery Web 交互 开发 


5.7 节 练习 答案 。 

(1) 该 行 代码 会 把 #menu 当 前 包含 的 列表 项 隐藏 起 来 , 但 是 这 对 将 来 新 建 的 列表 项 却 没 有 影响 。 

$('#meny Li').hidel() 

要 隐藏 如 enu 中 的 所 有 列表 项 ， 无 论 现 在 有 的 还 是 将 来 要 添加 的 ， 需 要 做 两 件 事情 。 首 先 ， 
修改 我 们 的 样式 表 ， 为 #menu 提 供 一 个 特殊 类 一 一 hideitems: 

#menu .hideItems LIL { 

visibility: hidden; 

} 
有 了 这 点 CSS 的 辅助 ， 隐 藏 所 有 列表 项 就 像 使 用 jQuery 的 addCLass 方 法 一 样 简 单 了 : 

$('#menuy').addClass “jh7getens 

现在 ， 无 论 是 当前 还 是 新 加 的 , 所 有 的 菜单 项 应 该 都 不 可 见 ， 和 下 到 调用 removeClass。 

(2) 这 段 代 码 有 两 点 值得 注意 : 

$('a').click(destroyWorld) .unbind( CLICK ) 























Q 这 句 话 有 一 定 的 相对 性 。 基 本 上 在 JavaScript 基 于 原型 面向 对 象 编程 的 过 程 中 , 一 个 对 象 的 属性 与 原型 属性 同名 是 
很 正常 的 ， 毕 况 这 也 是 原型 继承 根本 的 一 面 。 而 在 本 练习 中 ， 主 要 问题 还 是 在 于 类 属性 ( 静态 属性 )、 原 型 属性 
与 实例 属性 之 间 的 差异 。 在 这 里 我 不 再 作 过 多 的 解释 ， 请 读者 明 辩 或 查阅 更 多 资料 来 了 解 。 译 者 注 

@) 一般 说 来 就 是 {} 或 者 new 0bject () 表 示 的 对 象 的 原型 。 一 一 译 者 注 
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首先 ，destroyWorld 永 远 痢 不 会 被 调 用 ， 因 为 该 cLick 事 件 处 理 右 在 绑 定 之 后 就 立即 被 解 
除 绑 定 了 。 其 次 ， 这 里 的 unbind 会 删除 所 有 <a> 元 素 上 的 所 有 cLick 事 件 处 理 需 。 


(3) 在 4 个 选择 各 当中， 与 众 不 同 的 是 第 3 个 一 一 $(' .redShirt，#awayTeam') .die(): 


$('#9awayTeam .redShirt').diel() 
$('#awayTeam').find('.redShirt').diel() 
$('.redShirt, #awayTeam').die() 
$('.redShirt', $('#awayTeam')).diel() 


它 删 除 的 不 仅 是 awayTeam 元 素 中 包含 redShirt 类 的 元 素 上 的 Live 事 件 ， 而 是 redShirt 类 
元 条 和 awayTeam 元 条 上 的 所 有 1live 事 件 。 


(4) 下 面 这 段 代 码 的 作用 其 实 是 把 drJekyLL 的 ID 改 为 nrHyde。 
$('#drJjekyll').click -> 
alert 'Now I shall transform!' 
$('#drjekyll').attr 'id', 'mrHyde,' 
$('#drjekyll').unbind 'click' 
但 是 让 人 恼火 的 是 ， 每 次 被 单 击 时 ， 它 总 会 高 喊 “Now Ishall transform!”。 原 因 是 在 ID 变 了 
之 后 ，'#drjJekyLtL ' 选择 需 就 没有 任何 元 素 可 以 匹配 了 。 把 unbind 移 到 第 一 行 是 解决 办 法 之 一 。 
不 过 使 用 $(this) 人 代替 $('#drJekytLtL' ) 或 许 会 更 好 。 








A.5 _ Node.js 服务 器 端 程序 


6.6 节 练 习 管 案 。 


所 给 的 代码 其 实 是 一 个 死 循 环 : 
countdown = 10 

h = setInterval (-> countdown--), 100 
do (->) until countdown is 0 
clearInterval h 

console.log 'Surprise!' 


因为 循环 代码 永远 都 不 会 结束 运行 ， 所 以 无 论 经 过 多 长 时 间 ，countdown 都 不 会 变 小 。 下 面 
是 能 正常 工作 的 版 本 : 
countdown = 10 
decreaseCountdown = -> 
countdown-- 
if countdown is 0 
clearInterval h 


console.log 'Surprise!' 
h = setInterval decreaseCountdown, 100 


请 注意 ， 写 clearInterval h 这 一 行 时 ， 不 用 担心 h 不 存在 的 问题 。 当 运行 到 这 行 代码 时 ， 
程序 会 查找 当前 作用 域 是 否 有 h， 然 后 查找 外 层 作 用 域 ， 这 样 就 能 找到 由 setIntervalL 返 回 的 名 
柄 。 哎 ， 这 种 非 线性 的 思想 ， 就 是 我 们 为 了 摆脱 多 线程 需要 付出 的 代价 。 




















运行 CoffeeScript 的 无 种 方法 


尽管 CoffeeScript 生 态 系统 还 很 年 轻 ， 但 可 编译 运行 CoffeeScript 代 码 的 工具 为 数 不 少 。 在 1.3 
节 中 ， 我 们 已 经 看 过 官方 的 命令 行 编译 项 了 。 在 本 附录 我 将 推荐 其 他 儿 个 可 选 的 工具 。 
https://github.com/jashkenas/coffee-script/wiki 上 列 出 了 完整 的 相关 工具 。 








B.1 Web 控制 台 


访问 http://coffeescript.org, 除了 能 看 到 大 量 的 例子 之 外 , 你 还 会 发 现 一 个 名 为 Try CoffeeScript 
的 按钮 。 点 击 它 ， 束 会 有 一 个 活动 的 控制 人 台 跳 出 来 。 你 应 该 使 用 市 有 开发 人 员 控制 台 的 浏 览 硕 ， 
这 样 就 不 用 委 曲 求全 地 使 用 atert 输 出 信息 "了 。 试 着 输入 : 

console .log | 3 bh, "Cc’'][0%..=1| 
马上 就 能 在 右边 看 到 编译 后 的 JavaScript: 

comnsoLle OU 全 SIC 

单 击 Run (运行 ) 按钮 就 能 在 浏览 锅 控 制 台 中 看 到 运行 结 采 ["a"，"b"] 。 

如 果 你 想 同时 看 到 CoffeeScript 和 编译 后 的 JavaScript，Try CoffeeScript 是 不 错 的 选择 。 但 如 有 果 
你 想 要 更 多 类 似 于 REPL 的 体验 ， 以便 结合 jQuery 和 Underscore.js 等 类 库 一 起 尝试 使 用 CoffeeScript 
的 话 ， 那 就 试 试 JS Console”。 虽 然 也 有 不 足 之 处 ( 到 现在 它 也 不 支持 多 行 语句 ), 但 是 它 非常 灵 
活 ， 甚 至 还 有 文 持 iPhone 的 版 本 | 

你 可 能 会 对 这 些 控制 台 的 运行 速度 如 此 之 快感 到 惊讶 。 使 用 基于 Web 的 Ruby 或 Python 的 控制 
台 时 ， 要 知道 所 有 的 命令 必须 到 远程 的 服务 带 上 运行 ， 但 是 这 些 站 点 会 在 你 的 浏览 器 上 运行 
CoffeeScript 编 译 磊 。 当 然 你 也 可 以 这 么 做 一 一 请 看 下 一 他。 




















B.2 在 Web 程序 中 运行 CoffeeScript 


如 果 可 以 把 CoffeeScript 百 接 放 到 HTML 中 而 不 必 事 先 编译 为 JavaScript 是 不 是 很 棱 ? 是 的 , 真 








GD http://getfirebug.com/firebuglite 
@) http://jsconsole.comy/ 
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的 可 以 这 么 做 ! 
<script type="text/coffeescript"> 


alert 'Wow, this CoffeeScript jis right in your HTMLI 
</script> 


唯一 的 缺点 是 ， 需 要 引入 一 个 特殊 版 本 的 CoffeeScript 编 译 器 ， 而 它 有 170 KB 之 大 "。 
既然 这 样 能 够 生化 开发 ( 我 们 在 第 5 曹 的 示例 项 目 就 使 用 过 这 种 基于 浏 唤 带 的 编译 带 ), 但 除 
非 你 想 创 建 自己 的 CoffeeScript 控 制 台 , 否则 不 推荐 在 生产 环境 中 使 用 这 种 方式 。 除了 需要 加 载 一 
个 庞大 的 编译 器 之 外 ， 其 他 所 有 的 CoffeeScript 文 件 还 需要 在 编译 带 加 载 完 成 后 通过 Ajax 载 入 。 
接 下 来 介绍 的 几 个 工具 网 是 为 了 缩小 轻松 开发 与 快速 部 署 之 间 的 差距 。 

















B.3 Rails 中 的 CoffeeScript 


CoffeeScript 对 Ruby 感 激 不 尽 。 它 的 第 一 个 编译 间 就 是 用 Ruby 编 写 的 ， 最初 的 一 批 用 户 也 
是 Ruby 程 序 员 。 并 且 这 门 语言 现在 获得 了 37signals 公 司 杰出 Ruby 开 发 者 的 支持 。2011 年 10 月 ， 
Rails 3.1 通 过 Sprockets2 提供 了 对 CoffeeScript 的 支持 。 访 问 以 下 网 站 可 获取 最 新 的 Sprockets: 
https://github.com/sstephenson/sprockets。 


旧版 Rails 借 助 于 Barista” 也 能 直接 集成 CoffeeScript: 把 .coffee 文 件 放 到 某 个 目录 中 ， 它 们 在 
每 次 页 面 请 求 时 都 会 按 需 自动 编译 为 对 应 的 .js 文件 。 也 可 以 在 ERB 或 Haml 模 板 中 骨 入 
CoffeeScript 代 码 。 


Barista 更 进一步 ， 人 允许 你 将 CoffeeScript 代 人 码 打包 为 gems 或 者 从 gems 中 获取 CoffeeScript 代 人 码 。 
这 是 一 个 将 大 项 目 拆 成 可 重用 的 精简 版 组 件 的 极 佳 方式 。 而 且 ， 这 还 能 100% 兼 容 Heroku， 只 需 
要 扩展 therubyracer-heroku 即 可 。therubyracer-heroku 是 一 个 能 运行 于 所 有 Ruby 环 境 中 的 JavaScript 
解释 器 "。( 这 些 同样 适用 于 Rails 3.1 程 序 。Barista 和 Rails 3.1 都 采用 同样 的 gem 来 包装 CoffeeScript 
编译 髓 。)“ 

Barista( 和 多 数 为 CoffeeScript 整 合 的 Web 框 架 ) 的 一 大 缺点 是 ， 如 果 代 人 码 中 有 语法 错误 ( 编 
译 未 通过 )， 则 需要 等 到 刷新 页 面 或 过 到 不 标准 的 JavaScript 时 才能 发 现 。 我 为 解决 这 个 问题 写 了 
一 个 Grow1 搬 件 来 扩展 Barista， 在 CoffeeScript 编 译 失 败 时 ， 它 能 给 出 醒目 的 提示 。 


























GD http://jashkenas.github.com/coffee-script/extras/coffee-script.js 

@) Sprockets 是 一 个 Ruby 的 类 库 ， 它 可 用 来 编译 Web 毅 态 资源 ， 且 提供 静态 资源 服务 。 不 但 文 持 JavaScript 和 CSS， 还 
支持 CoffeeScript、SCSS 和 LESS 等 。 一 一 译 者 注 

@) https://github.com/Sutto/barista 

(4) https://github.com/aler/therubyracer-heroku 

(5) https://github.com/josh/ruby-coffee-script 

(©) https://github.com/TrevorBurnham/barista_ growl 
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B.4 CoffeeScript 中 间 件 


如 条 服务 硕 能 将 CoffeeScript 的 编译 透明 化 ， 让 程序 认为 目 己 使 用 的 束 是 原来 的 JavaScript 是 
不 是 更 好 ?是 的 ,我 们 可 以 使 用 中 间 件 一 一 一 种 在 Web 框 架 和 服务 絮 中 间 进 行 适 配 的 软件 ， 来 实 
现 甚至 比 这 更 多 的 愿景 | 

在 Ruby 的 世界 里 ， 可 以 选择 Rack。 集 成 Rack 最 成 熟 的 框架 就 是 恰 如 其 名 的 rack-coffee"。 它 
若 窑 Rails、Sinatra 以 及 其 他 所 有 主流 的 Ruby Web 框 架 (尽管 从 2010 年 10 月 开始 ，Sinatra 就 已 经 内 
置 了 对 CoffeeScript 的 支持 )。 最 近 ， 之 前 提 到 的 Barista 也 经 过 修改 ， 能 够 运行 在 所 有 基于 Rack 的 
框架 中 ， 而 不 单单 是 Rails。 


同时 ， 在 Python 这 块 土地 上 上 ，CoffeeCup” 为 Django、Pylons、CherryPy 以 及 其 他 无 数 的 基于 
WSGI 的 框 织 提供 了 第 一 流 的 CoffeeScript 文 持 。 如 采 前 端 和 后 端 具有 特殊 意义 的 空白 对 你 来 说 非 
各 重要 ， 它 是 个 不 错 的 选择 。 当 然 ， 还 有 一 种 选择 台 是 使 用 同一 种 语言 开发 前 后 端 。 




















B.5 Node.js 上 的 CoffeeScript 


回想 下 , 在 Node.js 中 可 以 使 用 coffee 命 令 直 接 运 行 .coffee 文 件 。 因 此 不 需要 在 后 端 编 译 。 真 
正 困 难 的 是 如 何 为 前 端 提供 编译 好 的 JavaScript 代 码 。 

邓 好 ，Connect(Node.js Web 框 架 核心 标准 ) 提供 了 和 目 动 完成 该 工作 的 中 间 件 。 只 需要 人 简单 
设置 下 就 行 。 按 照 下 面 这 样 的 顺序 将 Connect 的 compiLer 连 到 static 中 间 件 上 。( 我 们 在 第 6 章 使 
用 过 该 技巧 。) 

compiler = connect.compiler src: coffeeDir, enable: ['coffeescript'| 


static = connect,static coffeeDir 
connect.createServer compiler, static 


在 本 例 中 ，coffeeDir 中 的 .coffee 文 件 会 被 自动 编译 然后 以 .js 文件 提供 。 

一 些 Node 框 架 包 含 事 先 配 置 好 的 CoffeeScript 服 务 。 如 Brunch 和 Zappa 框 架 。 

虽然 现在 非常 流行 使 用 Rails 或 者 Django 来 开发 Web 程 序 , 但 还 是 有 大 量 网 站 根本 不 需要 后 端 
程序 。 那 么 ， 可 以 利用 CoffeeScript ( 也 许 同 Haml 和 Sass 一 起 ) 来 开发 普通 的 网 站 ， 同 时 ， 还 能 
成 与 标准 兼容 的 HIML/CSS 代 码 和 用 于 发 布 的 精简 的 JavaScript 代 码 ， 这 样 则 不 是 更 好 ? 



































B.6 使 用 Middleman 快速 建站 


好 在 还 有 Thomas Reynold 的 Middleman”。 如 果 你 已 经 安装 了 Ruby 或 者 RubyGems， 按 照 如 下 


GD http://github.com/mattly/rack-coffee 
@) https://github.com/dsc/coffeecup 
(3) http://middlemanapp.com/ 
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的 方式 就 能 简单 地 安装 和 运行 Middleman: 
$ gem install middleman 
$ mm-init myProject 
$ cd myProject 
$ mm-server 


访问 http://localhost:4567， 站 点 已 经 运行 起 来 了 。 然 后 可 以 修改 view 目 录 下 的 模板 代码 ， 然 
后 刷新 浏览 大 查 看 效果 。 在 发 布 之 前 ， 可 以 按照 需求 反复 地 修改 。 

Middleman 要 求 CoffeeScript 文 件 必须 使 用 .js.coffee 扩 展 名 保存 在 view 文 件 夹 中 的 某 个 位 置 。 
例如 ， 如 果 把 awesome.js.coffee 放 在 了 view/scripts 中 ， 则 对 应 的 <script> 标 签 就 应 该 引用 
scripts/awesome.js。 实 际 上 并 不 存在 这 个 文件 一 一 服务 融会 在 每 次 请 求 啊 应 时 目 动 生成 它 。 
这 就 意味 着 每 次 你 修改 CoffeeScript 代 码 并 刷新 浏览 如 之 后 ， 页 面 获 得 的 JavaScript 都 是 最 新 的 。 

准备 发 布 时 ， 你 可 以 直接 运行 : 

$ mm-build 
所 需 的 HTMLVCSS/JavaScript 会 出 现在 build 文 件 夹 中 ， 将 该 文件 夹 上 传 到 服务 器 ， 你 的 网 站 就 建 
好 1 
































B.7 用 CoffeeScript 编写 系统 脚本 


本 附录 结束 之 前 ， 你 是 否 知 道 我 们 还 可 以 使 用 CoffeeScript 来 完成 通常 你 会 使 用 Perl 或 者 
Python 来 完成 的 一 些 系统 任务 ? 只 需要 在 文件 开头 添加 一 个 组 织 行 ， 在 该 行 中 给 出 可 执行 程序 
coffee 的 路 径 即 可 (很 抱 舱 ， 使 用 windows 的 伙计 们 ， 这 只 能 工作 在 类 Unix 平 台 上 ): 


#!/UusSr/bin/env coffee 
console.log 'Hello, world!"' 


首先 确保 这 段 脚 本 可 执行 ( chmod +x helloscript.,coffee )， 然 后 使 用 sh helloscript. 
coffee 或 ,/heLLoscript,coffee 命 令 来 运行 它 (大 家 熟知 的 coffee heLLoscript,coffee 命 令 
也 行 )。 

记 住 ， 只 有 当 系 统 安装 了 CoffeeScript 编 译 顺 并 且 将 其 加 入 到 PATH 中 ， 该 脚本 才能 运行 。 

CoffeeScript 构 建 工具 牛 态 系统 之 旅 就 此 结束 了 。 毫 无 疑问 , 在 撰写 本 书 之 际 ， 有 很 多 有 意思 
的 项 目 正 在 迅速 发 展 ! http://github.com/jashkenas/coffee-script/wiki 有 一 个 最 新 的 列表 ， 一 定 要 去 
看 看 。 也 可 以 关注 Twitter 上 的 @CoffeeScript， 紧 上 果 出现 的 新 玩意 儿 。 

















JavaScript 开 发 者 备 扎 录 


备忘录 总 结 了 CoffeeScript 的 大 部 分 与 JavaScript 相 对 应 的 关键 字 和 操作 符 。 在 下 面 的 表格 中 ， 
Symbol (符号 ) 代表 在 CoffeeScript 中 的 推荐 写法 ， 而 Alias〈 别名 ) 代表 其 次 推荐 的 蔡 代 写法 。 





通常 ， 替 代 写 法 与 JavaScript 中 的 写法 相同 。 举 个 例子 ,在 CoffeeScript 中 ,， 较 | | 来 说 推荐 使 用 or， 


里 然 两 者 部 允许 使 用 。 


偶尔 给 出 的 JavaScript 代 码 是 稍 加 简化 过 的 ， 且 在 个 别 情况 下 会 与 CoffeeScript 有 上 所 不 同 。 相 


应 的 说 明 可 以 在 表格 下 面 的 表 注 中 找到 。 








像 拭 术 和 位 操作 符 这 些 并 没有 变化 的 JavaScript 伯 号， 就 不 在 这 里 提 及 了 。 


C.1 布尔 操作 符 


Symbol 
not x 

x ory 
x or= y 
x and y 


x and= y 


C.2 存在 判断 操作 符 


Symbol Alias 
Xx? 

func?() 

X?.y X.y if x? 


X ?= y x = y unless x? 


Alias JavaScript 

!X !X 

x ||y x ||y 

x ||=y x=x||ly 

x &&y x && y 

xX &&= y X= Xx &&y 
JavaScript 

typeof x != 'undefined' && x !== null 

if (typeof func === 'function') {func()} 

typeof x !== 'undefined' && x !== null ? x.y : undefined 

if (typeof x === 'undefined' || x === null) {x=y} 
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C.3 上 下 文 和 原型 访问 器 


Symbol Alias JavaScript 

@ this this 

@x this.x this.x 

ol 'x' | this['x'] this['x'] 

obj::y obj.prototype.y obj.prototype.y 
0bj::['y'] obj.prototype[ 'y'| obj.prototype[ 'y'| 


Symbol JavaScript 
func = (a) => 0. func = function(a) {...} 
func = (a) a> we func = bind(function(a) {...}, this)* 





* bind 函 数 返 回 了 一 个 包装 函数 ， 在 该 包装 函数 中 以 给 定 的 上 下 文 运行 对 应 的 函数 。 参 见 2.4 厄 中 “=> 是 如 何 工作 


的 ”专题 。 
C.5 ”条件 句 式 
Symbol Alias JavaScript 
y if x if x then y* if (x) {y} 
y unless x y if not x if (!x) {y} 


a = if x then y 
a = if x then y else z 


switch x 


if x thena=yelsea= undefined 


if x then a = y else a=72 


* 可 以 使 用 缩 进 语法 来 代替 then 从 句 。 


C.6 属性 检查 


a=x?y : undefined 
=X?Yy:z 


9 
参见 4.4 节 的 “多 态 和 类 型 转换 ”小 节 


Symbol JavaScript 
x of obj x in obj 
x in arr arr.indexOf(x) >= 0O* 


* CoffeeScript 实 际 上 直接 借用 了 Array 原 型 上 的 ijndex0f 方 法 。 如 果 Array.prototype.index0f 尚 未 定义 
(Internet Explorer 8 及 后 续 版 本 就 是 ) ， 则 会 使 用 等 价 的 函数 代替 。 
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C.7 ”迭代 


Symbol Alias 
f() for x of obj for x of obj then f() 
f() for x in arr for x in arr then f() 
f() for x in [a..b] for x in [a..b] then f() 
f() for x in [a...b] for x in [a...b] then f() 


JavaScript 
for (x in obj) {f()} 
for (var i = 0; i < arr.length; i++) {f()}* 
for (var i = a; i <= b; i++) {f()}** 


for (var i = a; i < b; i++) {f()}** 


* 在 CoffeeScript 中 ，arr.Length 会 被 缓存 起 来 ， 因 此 循环 过 程 中 对 数组 进行 的 修改 无 法 对 迭代 的 区 间 产 生 影 响 。 
** 假定 a < b。 如 采 a > b， 则 循环 从 大 到 小 而 不 定 从 小 到 大 地 进行 迭代 。 





CoffeeScript Accelerated JavaScript Development 
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“学 习 CoffeeScript 有 助 于 读者 成 为 更 优秀 的 JavaScript 开 发 人 员 。 而 且 ， 本 书 读 来 柄 畅 淋 漓 ， 对 于 准备 学 习 
CoffeeScript 的 新 手 ， 这 种 体会 尤为 深刻 。” 
一 一 Brendan Eich，JavaScript 之 父 


“很 难 想象 现 如 今 会 有 了 哪个 Web 程 序 没 有 大 量 使 用 JavaScript。 如 果 你 用 惯 了 Ruby 之 类 的 语言 ， 再 使 用 JavaScript 就 

会 明显 感觉 在 退步 ， 这 可 不 是 什么 愉快 的 事 儿 。 来 看 看 CoffeeScript 吧 : 它 是 一 个 JavaScript 预 编译 器 ， 移 除了 JavaScript 
中 不 必要 的 元 余 ， 让 代码 编写 和 源码 阅读 变 成 一 件 乐 事 。 来 ， 向 着 Coffee 前 进 吧 ! 这 是 一 本 很 棒 的 CoffeeScript 入 门 书 。” 

一 一 David Heinemeier Hansson，Ruby on Rails 之 父 


“CoffeeScript 是 编程 语言 领域 最 有 意思 的 进展 之 一 ， 它 吸纳 Ruby 和 Python 等 语言 之 精华 ， 是 一 门 极 富 表 现 力 的 语 
言 。 本 书 将 指引 你 进入 CoffeeScript 的 世界 ; 对 于 那些 有 志 于 提高 JavaScript 开 发 效率 的 开发 者 ， 本 书 同样 必 不 可 少 ! ” 
一 一 Travis Swicegood，《 版 本 控制 之 道 一 一 使 用 Git》 作 者 


作为 唯一 所 有 主流 浏览 器 都 支持 的 脚本 语言 ，JavaScript 例 然 已 成 为 Web 开 发 领域 最 具 号 召 力 的 语言 ， 但 它 的 种 种 语 
言 怪 癖 以 及 在 各 种 浏览 器 间 实 现 不 一 致 等 问题 也 为 开发 人 员 所 诉 病 。2009 年 底 ，CoffeeScript 横 空 出 世 。 它 吸收 了 
JavaScript 语 言 的 精华 ， 并 添加 了 很 多 现代 语言 脚本 的 特性 ， 很 快 便 得 到 了 大 量 Web 开 发 人 员 的 青睐 。 

本 书 由 CoffeeScript 重 要 贡献 者 Trevor Burnham 操 刀 ， 从 基础 知识 入 手 ， 全 面 详 尽 地 介绍 了 CoffeeScript 这 门 新 语言 。 
通过 一 个 5 x 5 拼 字 游 戏 ， 作 者 将 CoffeeScript 各 方面 的 知识 融入 其 中 ， 通 俗 易 懂 地 讲解 了 CoffeeScript 如 何 与 jQuery 等 非常 
流行 的 类 库 完 美 集成 ， 如 何 游 丸 有 余地 结合 Socket.1O 实 现 Node.js 双 通道 异步 通信 。 每 章 结 尾 都 有 精心 设计 的 习题 ， 有 助 
于 读者 巩固 所 学 的 CoffeeScript 知 识 并 更 上 一 层 楼 。 

掌握 CoffeeScript，Web 开 发 之 旅 将 更 轻松 、 快 捷 和 优雅 ! 
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电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 犹 
豫 仿 复 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 
出 厂 业 巨变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 
版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 
体验 : 在 线 阅 读 和 PDF。 



































相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 
布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 ( 即 使 
有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 着 还 可 以 万 便 地 进 
行 机 索 、 勇 贴 、 复 制 和 打印 。 











最 方便 的 开放 出 版 平 合 


图 灵 社 区 同 读 着 开放 在 线 写 作 功 能 ， 协 助 你 实现 目 出 
版 和 开源 出 版 的 梦想 。 利 用 “合集 功能 ， 你 就 能 联 
合 二 三 好 友 共 同 创 作 一 部 技术 参考 书 ， 以 免费 或 收费 
的 形式 提供 给 读 着 。 (收费 形式 须 经 过 图 灵 社 区 立项 
评审 。) 这 极 大 地 降低 了 出 版 的 门 柳 。 只 要 你 有 写作 
的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 























图 灵 社 区 引进 出 厂 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 
社区 公布 。 如 末 你 有 意 翻 译 哪 本 图 书 ， 欢 迎 你 来 社区 
申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
译 背 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 
需要 有 坚强 的 效力 的 。 


欢迎 加 入 


各 灵 储 区 


图 灵 社 区 进一步 把 传统 出 版 流程 导电 子 书 出 版 业务 
紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
式 ， 我 们 称 之 为 “敏捷 出 版 ”， 筷 可 以 让 谈 着 以 较 
快 的 速度 了 解 到 国外 最 新 扩 术 疼 书 的 内 容 ， 弥 补 以 
往 翻 译 版 技术 书 “ 出 版 妈 过 时 ”的 缺憾 。 同 时 ， 敏 
捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 万 便 ， 可 以 
提前 销 灭 书稿 中 的 错误 ， 最 大 程度 地 保证 图 书 出 版 


的 质量 。 












































最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 区 勘 
误 、 发 表 评论 ， 以 各 种 方式 与 作 译 背 、 纲 辑 人 员 和 
其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 
银子 oO 

















你 可 以 积极 参与 社区 经 第 开展 的 访谈 、 审 读 、 评 选 
等 多 种 活动 ， 启 取 积 分 和 银子 ， 积 累 个 人 声望 。 








